Containerize your React application using Docker

Why Docker?

While developing any kind of software, you may have experienced situations like your application works on your development machine but fails to start in someone else's machine or deployment environment. This can happen because of,

1. The discrepancy between the software version required and the software version available on the machine.
2. Configuration settings are different from the development machine.
3. Missing files.

Docker provides a solution to these problems by containerizing the software.

According to Docker's official website,

Containers are a standardized unit of software that allows developers to isolate their app from its environment, solving the “it works on my machine” headache.

To know more about docker, visit its official website.

Installing and running Docker

For installing Docker, go to this link (for windows).

Creating React Application

To create a React application, Nodejs is a prerequisite. Install Nodejs from here.

Run the command below to create a new react project.

npx create-react-app react-app

This will create a new react project named react-app.

Now, we can open the project on any IDE to see the folder structure.

To run the react app use the following command on your terminal.

cd react-app
npm start

Once the app is up and running, the terminal will show messages like this.

terminal message on starting the react app

Now the react application is running on the development server; you can view your app on any browser on this address.

http://localhost:3000

react app running on development server.

Dockerizing React Application

As we have our basic setup ready, we can start creating a Docker Container to isolate the React Application.

Create a file named Dockerfile in the root folder of the react application. Docker can build images automatically by reading the instructions from the Dockerfile.

Copy the following code to the Dockerfile and save it.

# Pull the latest base image
FROM node:alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# Copy package.json to /app
COPY package.json ./
# Copy package-lock.json to /app
COPY package-lock.json ./
# Install dependencies
RUN npm i
# add app
COPY . ./
# start app
CMD ["npm", "start"]   

Let's go through the Dockerfile.

• FROM node:alpine - This line of code tells Docker to pull the latest base image for Nodejs from DockerHub.
• WORKDIR /app - This will define the working directory of a Docker container at any given time. Here the name of the directory is app, you can give any name as you want.
• ENV PATH /app/node_modules/.bin:$PATH - Here we use ENV to update the PATH environment variable for the software your container will install. Here we set the environment path for npm command to work.
• COPY package.json ./ - Here we copy package.json to the working directory.
• RUN npm i - This will run the command npm i to install all the dependencies.
• CMD ["npm", "start"] - This will run npm start command to start the application.

Start the Docker Desktop application.

In the terminal, go to the root directory of the react application and run the following command to build the Docker Image.

docker build -t react-app .

The above command will create a Docker Image named react-app, you can view this image in Docker Desktop App or you can use the following command to view all the Docker Images on your machine.

docker images

Go to the images section in the Docker Desktop app

As we have created the image, we can run the container by the following command.

  docker run -d --rm  -p 3000:3000 -e CHOKIDAR_USEPOLLING=true react-app

Let's breakdown this command

• -d, will run the container in the background and print the container ID
• --rm will automatically remove the container when it exits
• -p 3000:3000, will publish the container's 3000 port to the host's 3000 port
• -e CHOKIDAR_USEPOLLING=true, -e will set the environment variable CHOKIDAR_USEPOLLING to true
• react-app is the name of the image that we want to run

Now you can access the container from localhost:3000.

You can also view your running container in Docker Desktop.

To stop the container, you can simply exit the terminal, or use the docker stop command. For more docker commands, go to the official website.

Comments

[Makar]

Sorry, I didn't read the entire article, but just in case it is not highlighted -- you do not want to ship this docker image to production. The production version needs to be converted to regular js with the npm run build comand and placed in an apache or nginx container to be served.

[Abhijit Biswal]

Great work!

[Pawan Kumar Mishra]

Thanks!