If you’re using grunt for front-end development, you might also be using the grunt-connect server to save some time. If so, you might have wondered how to proxy API requests without moving them to another domain in your client code. I recently ran across this problem and looked closer at grunt-connect for a possible solution. As it turns out, grunt-connect allows you to specify express-style “middleware” functions in the grunt configuration. For all the proxy heavy-lifting, I found the lightweight connect-proxy that was a perfect fit for this scenario.
Here is the gist of how I did it.
It starts with a small middleware function to intercept HTTP calls to a particular endpoint (/api in this example). You could pass the endpoint via a config option, but I didn’t need the flexibility. Anyway, grunt-connect allows you to add express-style middleware functions to the development server by simply adding them to a “middleware” array. Inside our single middleware function, we allow connect-proxy to proxy our /api request to a configured endpoint.
In the Gruntfile, just add a middleware and proxy option for various targets. The middleware option is looking for the above function. Each option can be selected by calling the appropriate grunt target.