Deploying a React app to production in a docker container?

After you develop a React app and you manage to get it into a state where you are happy with the result, the next natural is step is deploying it to production so that other people can access it.

To do that, you have two possibilities: compiling it to a static application (an index.html file and a bunch of .css and .js files) or having a node server to serve the application.

We will offer a guide for the first method. Having only static files served can be better cached and the application serving the files (usually a specialized piece of software as Nginx or Apache server).

We will build and deploy in a docker container so that we leverage the power of containers and have a predictable deployment no matter the environment.

We will assume that you have an app bootstrapped with Create React App still using create-react-app or ejected, thus having the npm run build command available in your project root.

  1. First, if you don't have docker installed locally, you need to install it. To do that, we picked some very good tutorials from the official Docker documentation for that, depending on your operating system:

    Test the installation to make sure everything is set up correctly with this command

    docker run hello-world
  2. Create a file nginx.conf with the following content

    server {
       listen 80;
       server_name example.com;
       root /usr/share/nginx/html;
       index index.html;
     
       location / {
         try_files $uri /index.html =404;
       }
    }

    We will use this configuration file to instruct NGINX to serve either a static file built by Webpack and fall back to index.html for every other path so that going straight to URLs that are handled by the router will work properly.

  3. First step is to create a Dockerfile in your project root, near package.json. In this file we will write the instructions for docker to build the image as follows:

    FROM node:12.16.0 AS builder
    
    ENV PUBLIC_URL "http://example.com/"
    ENV NODE_ENV "production"
    
    WORKDIR /home/node/app
    ADD ./frontend /home/node/app
    RUN npm install
    RUN npm run build
    
    FROM nginx:1.17.9
    
    ENV NGINX_HOST example.com
    
    COPY nginx.conf /etc/nginx/conf.d/example.com.conf
    COPY --from=builder /home/node/app/build /usr/share/nginx/html
  4. Run the Docker build command to build the image.

    docker build -t react-app:latest -f Dockerfile .

    We don't need to pass the -f Dockerfile parameters but we prefer to pass it every time as we prefer commands to be more specific, and we also usually have multiple Dockerfiles for a single project (one for local development and one for production at least).

  5. After the previous command is finished, it is the time to start to container and see the React application being served.

    docker run -it -p 80:80 --name my-react-app react-app:latest
  6. Go in the browser at http://localhost:80 to see the result. We will see that going to any URL directly, the application is served and behaves correctly.

We hope you enjoyed this post and you found it useful. If you spot any error, have any suggestions or just want to get in touch, you can reach us at [email protected]

Deploy your applications in minutes

We are setting things up! Leave us an mail address to be the first to find out when we launch!

Or contact us directly at [email protected].

If you want, you can share this post via Twitter