How to Dockerize React Application

How to Dockerize React Application

Docker is a tool that allows developers to easily create, deploy, and manage small, modular services called microservices. By using Docker, you can ensure that your code will run consistently in any environment, eliminating the need to troubleshoot environment-specific issues. Additionally, Docker can significantly accelerate the development and deployment process, making it a valuable tool for teams working with microservices.

In this article, I will demonstrate how to dockerize a react application for development and Configure a production-ready image

Prerequisites:

  1. Docker

  2. Basic knowledge of react and node

We will be using:

  • Docker

  • Node v18.12

  • Create React App

Setting up react application:

Step 1: Create a sample react app using the following terminal command:

npm init react-app myapp --use-npm

This will create a directory named myapp

Step 2: change the directory to myapp

cd myapp

Step 3: Add a Dockerfile to the project root

Write the following commands into the Dockerfile

#pull official base image
FROM node:14-alpine

#set working directories
WORKDIR /myapp

#copies the package.json and package-lock.json files into the /myapp directory
COPY package.json ./
COPY package-lock.json ./

#install all the dependencies
RUN npm install

# add app
COPY . .

#expose port 3000
EXPOSE 3000

CMD ["npm","start"]

This Dockerfile specifies that we want to use the official Node.js Docker image based on Alpine Linux, and then copies the package.json and package-lock.json files into the /myapp directory.

It then runs npm install to install the dependencies, copy all the other files into the /myapp directory, and exposes port 3000.

Finally, it specifies that the default command for the image is npm start, which will start the development server for the React application.

This is how it will look like:

Step 4: Add a .dockerignore file

Add the following in dockerignore file:
node_modules build .dockerignore Dockerfile Dockerfile.prod

Save it!

This will speed up the Docker build process by not sending the "node_modules" directory and other files with local dependencies to the Docker daemon.

Step 5: Build and tag Docker image:

docker build -t myreact .

This command will build a Docker image with the name "myreact" based on the instructions in the Dockerfile. The . at the end specifies the current directory as the context for the build.

You can check the build image by doing docker images command, it will show up the image

Step 6: Run the Docker image:

docker run -d -p 3000:3000

This command will start a new container based on the myreact image and bind the container's port 3000 (the default port for the React development server) to the host's port 3000. You can then access your application by going to http://localhost:3000 in a web browser. The -d flag will run the container in detached mode meaning it runs in the background of your terminal. It does not receive input or display output.

You can check the container by doing docker ps which will show the running containers

Wrapping up!!

I hope that by now you have got the Idea of how to dockerize a react application for development.