How to Setup Proxy Server for ReactJS and Node on Heroku With Docker
By: Valtteri Laine
Tags: Nginx, Docker, Reactjs, Nodejs, Heroku

This article will walk you step by step on how to setup a proxy on Heroku using Docker and Nginx. I will also show how to setup a simple frontend with create-react-app and a Nodejs server. All dockerized and running on Heroku.

As a heads up free Heroku apps take a while to start once they have fallen asleep, but this is happens only for free options. If you know a better free alternative, let me know!

Our final setup will look like this:

For this setup we will use two Heroku apps. One for backend and one for frontend.

React-Create-App

First, let’s make a React frontend that makes a simple request to the backend. Start by running create-react-app with the following command:

npx create-react-app my-react-frontend

This will create a new folder, with all the necessary boilerplate for a React project. Change into the folder created by create-react-app:

cd my-react-frontend

Then install all the dependencies with:

npm install

And start the development server with:

npm start

Now you should be running a React application on localhost:3000. If everything looks ok, let’s add a button to make a request.

Should look like this

Open up the file my-react-frontend/src/app.js and replace the contents with this:

When clicked the button will make a request to path “api/hello-world” and to whatever domain the frontend is running on. The “api/” part of the request is important.

Then you should have something like this:

If you press the button now, you will be flooded with a wall of text. Create-react-apps development server seems to respond with contents of the index.html file for some reason. It’s fine for now, so let’s move on to configuring our Nginx server.

Setup Nginx Configuration File

Next we will create the Nginx configuration file that will serve our React build and proxy its requests to our backend. For now, create this configuration file in the folder created by react-create-app.

Create a file named “default.conf.template”. Open the created file in your code editor. Then add:

server {

# Listen to port defined by Heroku

listen $PORT default_server;

}

The server block tells Nginx that we want to start a new server. The listen declaration tells Nginx on which port we want it to run on. $PORT variable will be defined later in a Dockerfile.

Then add the location property into the server block of code:

server {

# Listen to port defined by Heroku

listen $PORT default_server;



# Serve static files for requests made to /

location / {

root /usr/src/app/build;

} }

This means that any requests made to “/” of our frontend server will be served static files from /usr/src/app/build within the Docker container.

Add another location declaration to the configuration, that will redirect traffic from our frontend servers /api path to “https://my-react-backend.herokuapp.com/;”





# Listen to port defined by Heroku

listen $PORT default_server;



# Serve static files for requests made to /

location / {

root /usr/src/app/build;

}



# Redirect requests made to /api

location /api {

proxy_pass

}

} server {# Listen to port defined by Herokulisten $PORT default_server;# Serve static files for requests made to /location / {root /usr/src/app/build;# Redirect requests made to /apilocation /api {proxy_pass https:// my-react-backend .herokuapp.com/;

This is what our final configuration file should look like. Next lets dockerize it.

Dockerize Frontend

In order to deploy to Heroku we need to dockerize our frontend.There are definitely other ways, that might even be better and faster, but this is how I do it.

in root React project folder, create a Dockerfile. Note the capital first letter. Open it and add the following code:

First get default Nginx image from Docker hub by adding these lines to the Dockerfile you just created:

# Get Nginx image from Docker hub

FROM nginx

Then we want to copy our Nginx server configuration file into our docker image. We will create this configuration file soon:

COPY default.conf.template /etc/nginx/conf.d/default.conf.template

Then we need to add this monstrosity to make sure that our proxy server is running on the correct port on Heroku, and that the $PORT variable is defined. Kudos to RJoonas for this:

CMD /bin/bash -c “envsubst ‘\$PORT’ < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf” && nginx -g ‘daemon off;’

The above code will setup Nginx for our frontend app. Next we need to configure docker to build our React app.