Here’s How to Dockerize React App [Containerize React App]

Table of Contents

Introduction

A few days back, I had to dockerize React app. That was quite challenging because I had no experience with Docker. I had to start from scratch to understand the dockerize react app, its prerequisites, installation, advantages, and disadvantages. Finding everything in one place about the dockerizing a react app was a real struggle. And that’s when I thought I’d indeed write a blog post to lessen fellow React developers’ struggle to deploy a Docker in a React Application. Here’s the list of subtopics that we will discuss in detail on how to containerize React app.

Prerequisites: Dockerize React App

• Docker installed in your system.
• Create an account at the Docker Hub registry for pushing and pulling the Docker images. It’s absolutely free; you can visit Docker Hub for registration.
• As the blog focuses on dockerizing React app, we will need a demo application to implement Docker in a React Application. If you don’t have a ReactJS app, don’t worry; you can just follow the next section’s steps.

Create a React App

If your system doesn’t have create-react-app installed, run the below command.

npm i create-react-app --global

Here, we will create a new ReactJs application; if you want to use an existing app, that works.

create-react-app demo-react-docker-app

Go to demo-react-docker-app and run the command to make sure it’s working.

cd demo-react-docker-app
npm start

Struggling to implement Docker with React application?
Looking for dedicated ReactJS developers with extraordinary problem-solving skills? Here we are to lessen your burden! Contact us today and hire ReactJS developer!

Create Dockerfile for React App

Create a file, Dockerfile, and add it to the root directory.

# pull the official base image
FROM node: alpine
# set working direction
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install application dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm i
# add app
COPY . ./
# start app
CMD ["npm", "start"]

Add a .dockerignore file

Though it’s not mandatory to have a .dockerignore file, it’s a good practice to add it as it speeds up the build process of the Docker image and excludes the unnecessary files.

Here’s the code which you have to add to your .dockerignore file.

node_modules
npm-debug.log
build
.dockerignore
**/.git
**/.DS_Store
**/node_modules

Create Docker Image

After running the Docker build command, you’ll be able to create Docker Image with the help of Dockerfile. I have named my Docker Image as a sample:react-app, but you can replace it with your choice. Please keep in mind that a dot must follow the Docker image as it means that the path of the Docker build and Dockerfile is the same.

docker build -t sample:react-app

If you wish to list the images which are generated with your React Application Image, then run the following command.

docker images

Run the Docker Container

Moving on towards the last step of how to Dockerize React app.

We have successfully made Docker Image; now follow the below-mentioned command to Run react app on the Docker image. Please verify your image name (here sample:react-app) that you have given.

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

So, these were the steps to dockerize react app. I hope this blog post has helped and satisfied your requirements and now you are able to Dockerizing a React App. Just follow and run the commands as mentioned above and dockerize react app.

Conclusion