How to Dockerize your React Application

Dockerizing a React application provides numerous benefits, including simplified deployment, enhanced scalability, and improved consistency.

This blog post will guide you through the process of containerizing your React application using Docker, also show you the power of containers and unlock a world of possibilities for your development workflow.

Let's dive in and explore the prerequisites, steps, and best practices involved in Dockerizing your React application.

Prerequisite

To follow this tutorial, you will need to have :

• Installed Docker Desktop
• Basic knowledge of Docker CLI
• Installed npm

Set up the project

To create this project, you need to use npx. If, for some reason, it’s not available, install or update it as the following:

$ npm install -g npx

npx makes it easy to install and manage dependencies hosted in npm registry. It’s an npm package runner — helps to execute packages without installing explicitly.

Now, you can create a react app using npx:

$ npx create-react-app my-react-app

Enter in your project folder

$ cd my-react-app

Delete the node_modules folder at the root of your project, you will not need it in your host environment because we will install dependencies during the build of the image, and we will use the node_modules folder of the container.

$ rm -rfv node_modules

Create the Dockerfile

Add a Dockerfile to the project root:

FROM node:16-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH="/app/node_modules/.bin:$PATH"

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install
RUN npm install react-scripts@3.4.1 -g

# add project sources in /app
COPY . ./

# start app
CMD ["npm", "start"]

Create a .dockerignore file and add these lines

node_modules
.dockerignore

This will speed up the Docker build process, as our local dependencies inside the node_modules directory will not be sent to the Docker daemon.

Build and tag the Docker image:

$ docker build -f react.dockerfile -t react-app:latest .

Run the container

Once the build is done, you can run the container

$ docker run \\
    -it \\
	-d \\
    --rm \\
    -v ${PWD}:/app \\
    -v /app/node_modules \\
    -p 3000:3000 \\
    -e CHOKIDAR_USEPOLLING=true \\
    react-app:latest

What’s happening here?

1. The docker run command creates and runs a new container instance from the image we just created.
2. -it starts the container in interactive mode.
   Why is this necessary – As of version 3.4.1, react-scripts exits after start-up (unless CI mode is specified) which will cause the container to exit. Thus the need for an interactive mode.
3. -d run the container in detach mode, i.e. in the background
4. -rm removes the container and volumes after the container exits.
5. -v ${PWD}:/app mounts the code into the container at /app.
6. Since we want to use the container version of the node_modules folder, we configured another volume: -v /app/node_modules. You should now be able to remove the local node_modules folder.
7. -p 3000:3000 exposes port 3000 to other Docker containers on the same network (for inter-container communication) and port 3001 to the host.
8. Finally, -e CHOKIDAR_USEPOLLING=true enables a polling mechanism via chokidar (which wraps fs.watch, fs.watchFile, and fsevents) so that hot-reloading will work.

Open your browser to http://localhost:3000/ and you should see the app.

Try making a change to the App component within your code editor. You should see the app hot-reload. ➰

Using Docker Compose

A more common (cleaner) way to avoid using a long command to run a container, is to use docker compose. So add a docker-compose.yml in your project root.

services:
  react-app:
    build:
      context: .
      dockerfile: react.dockerfile
    image: simple-react-app:latest
    container_name: rect-app
    volumes:
      - type: bind
        source: .
        target: /app
      - /app/node_modules
    ports:
      - "3000:3000"
    environment:
      - CHOKIDAR_USEPOLLING=true
    restart: unless-stopped

Without the anonymous volume /app/node_modules, the node_modules directory in the container would be overwritten by the bind mounting of the host directory at runtime.

In other words, this would happen:

• BUILD STAGE - The node_modules directory is created in the image.
• RUN STAGE - The current directory is mounted (bind mounted) into the container, overwriting the node_modules that were installed during the build.

Build the image and fire up the container:

$ docker-compose up -d --build

Ensure the app is running in the browser and test hot-reloading again. ➰

Wrap Up

In this tutorial, we've covered the prerequisites for Dockerizing a React application, the steps involved in creating a Dockerfile, and how to use Docker Compose to simplify the process of running your container.

You will find all the code snippets of this tutorial on my GitHub here.

By following these steps, you'll be well on your way to taking advantage of the many benefits that containerization has to offer.