Creating a proxy for your frontend application using NGINX

Problem

You have frontend application using a web service to get resources and is running on a gulp/grunt server.

Issues are:

• You will come across CORS errors
• You will have no userfriendly URLS (you will have something like localhost:9090).

How to get rid of these problems?

Easy, just use a NGINX proxy. Here is how

Assumptions: 

1. Our frontend app is running on a grunt Web server (grunt server) on http://localhost:9090
2. The app is calling a web service on http://example.com/service/api

Solution

• Adding the virtualhost

server {
   listen 80;
   server_name my-app.local;

   index index.html index.htm;

    charset utf-8;

    location /service/api {
        proxy_pass http://example.com/service/api/;
    }

    location / {
        proxy_pass http://localhost:9090/;
    }

}

• Adding  the host mapping

vi sudo /etc/hosts

• You are ready to go