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

host mapping

 

 

 

  • You are ready to go

browser