202 Gruntfile

Configuring a proxy server in our Gruntfile

As we want to release the portal under the same domain as our API we have to set up a proxy server. Our portal runs on port 9000. We can not start our development API server on the same port thats why it is running on port 3000. We have to proxy all reqeusts that are supposed to call our API to that port. In the connecttask of our grunt file we can do that by adding the option proxies

connect: {
  options: {
    ...
  },
  proxies: [
    {
      context: ['/api'], // all urls that contain /api should be proxied
      host: '127.0.0.1',
      port: 3000 // port of our API server
    }
  ],
  server: {
    options: {
      port: 9000 // port our our portal server
    }
  }
}

In our grunt serve task we have to add the task configureProxies:server after the connect task. When we now start our portal npm start We can access our portal as usual by calling localhost:9000. But when we call http://localhost:9000/api/heroes we see the same response as when calling localhost:3000

This technique is also very useful when you have to deal with cross site requests. Normally servers do not allow cross site requests. Only when the response header allow-origin: WHITELISTED DOMAINS cross origin requests are allowed. Your production server is probably also not allowing cross site origin requests. In production the portal and the api are running on the same domain so everything is working fine.

However during development the portal is running on localhost:9000. All requests to the production server are blocked by the browser when the allow-origin in not allowing requests from localhost.

The proxy can solve this problem.