React.js + backend local development setup from easy to advanced

10x your develoment speed with local testing.

Most people are probably using ngrok for webapp develpment and to expose their develpment server on localhost on a public https:// address. Commonly this is neccessary if the you want test a frontend based interaction with a 3rd party like Facebook-authentication. If you are not using this setup and are testing your code using a remote server (like I did), you should definitly try this as it is garanteed to 10x your development speed.

1. Basic use:

Let say we have react.js dev-server running on localhost with port 3000 (default for create-react-app). We can simply expose it on a public address using:

ngrok http 3000

This will set ngrok up with the following two tunnels:

Forwarding http://01a0665b4918.ngrok.io -> http://localhost:3000
Forwarding https://01a0665b4918.ngrok.io -> http://localhost:3000

This means we can now browse https://01a0665b4918.ngrok.io and the requests will be forwarded or tunneled to port 3000 on our local machine.

2. Basic use with backend server:

Now lets say our React fronend has some backend calls to our api. This means we want to have backend or api server running on port 5000. If you used create-react-app this can easily be enabled:

In your package.json located in the project directory add the following statement on the bottom:

  },
"proxy": "http://localhost:5000"
}

Now if the React dev-server finds a request it doesn’t know it will forward this to port 5000. But if you use react-router this will run into issues. If your app uses a backend endpoint like https://myreactapp.com/api and you use react-router-dom this will run into issues. The problem then is, that react-router will interpret /api as route and no calls to /api will ever reach our backend. So we need to find a way to sort out these calls before react-router can handle them. For this we will nginx:

3. Advanced useage with backend server

For this to work, we need to install nginx. Even though nginx is a very capable http server, we will not use it to server the request by itself, but we configure nginx as a router the forward or proxy requests to the appropiate development servers.

We can install nginx eg. using homebrew:

brew install nginx

Next we will set up two seperate location directives in nginx.conf (/usr/local/etc/nginx/nginx.conf on Mac):

server {
  listen       8080;                   # Ngrok
  server_name  localhost;
  location /api {
    proxy_set_header Host $host;
    proxy_pass http://localhost:5000;  # Backend 1: Flask Dev Server
  }
  location / {
    proxy_set_header Host $host;       
    proxy_pass http://localhost:3000;  # Backend 2: React Dev Server
  }
}

After we start nginx using

nginx

it will listen on port 8080 for incoming connections. In case the /api path is requested, these requests will be forwarded to port 5000, in this case where Flask is running. All other requests are forwarded to port 3000 where our React dev-server is listening.

Now we can start ngrok with port 8080 and our setup is completed:

ngrok http 8080

If you found this article helpful please share and leave a comment or suggestion.