I made this Docker image so I can reuse it easily with every React project I dockerize or start from scratch. I open-sourced it so everyone can use it to move their app easily to production. Here is the GitHub URL: https://github.com/fitiavana07/docker-react.

How do I use it?

Just copy this into a new Dockerfile.

# The first image is for compiling the client files, the second is for serving.

# BUILD IMAGE
FROM node:14-alpine as build-stage

WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm install

# Build
COPY . .
RUN npm run build

# -----------------------------------------------------------------------------
# SERVING IMAGE
FROM fitiavana07/nginx-react

# Copy built files
COPY --from=build-stage /app/build /usr/share/nginx/html

# 80 for HTTP
EXPOSE 80

# Run nginx
CMD nginx -g 'daemon off;'

The stack

I used Nginx to serve the built files, along with the config for serving React properly. The whole is bundled into the docker image fitiavana07/nginx-react, so you don't need to worry about the config.

Does it support react-router?

Yes, it supports react-router. All routes other than the root are handled properly.

Suggestions are welcome.