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:

Our frontend app is running on a grunt Web server (grunt server) on http://localhost:9090
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

host mapping

You are ready to go

browser