Containerization of React JS Application using Docker

Introduction

In this article, we will create a sample React JS application and learn how to containerize it with the help of docker.

Agenda

Sample React JS Application
Generate Docker File
Containerization of Application

Prerequisites

NPM
React JS
Docker Engine

Sample React JS Application

Step 1. Create a New React JS Application

Create a new React JS application using the below command.

Note. Make sure you already have NPM and React JS on your machine.

npx create-react-app reactjs-app-docker

Create react app

Step 2. Run the Application

Go inside the application directory and run the application.

npm start

Npm start

Learn react

Generate Docker File

# Use the official Node.js base image
FROM node:18

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the React app
RUN npm run build

# Install serve globally to serve the build folder
RUN npm install -g serve

# Expose the port the app runs on
EXPOSE 3000

# Start the React app
CMD ["serve", "-s", "build"]

Explanation of each step of Docker File.

Explanation of first step

This line specifies the base image for our Docker image. We are using the official Node.js image with version 18. This image includes everything needed to run a Node.js application.

Working directory

The above line sets the working directory inside the Docker container to /app. All subsequent commands will be run in the /app directory. This helps keep the filesystem organized inside the container.

Inside the container

Copies package.json and package-lock.json from the host machine to the current working app directory in the Docker container. These files are necessary to install the application's dependencies.

Install the application dependencies

This step runs npm install to install the dependencies defined in package.json. This step ensures that all the necessary Node.js packages are installed in the container.

Rest of the application

Next, copy all the files and directories from the current directory on the host machine to the current working directory in the Docker container. This includes the source code and any other files required to build and run the application.

Build the react app

This line runs the npm run build, which builds the React application for production. The build process compiles the React code.

Serve the build folder

Installs the serve package globally inside the Docker container. serve as a simple static file server that we will use to serve the built React application.

Port the app runs

This line informs Docker that the container listens on port 3000 at runtime. This is the port where the React application will be served.

Start the react app

Next, specify the command to run when the container starts. Here, the serve -s build starts the serve static file server and serves the contents of the build directory, which contains the compiled static files from the React build process.

Containerization of Application

Note. Make sure you have Docker Engine on your machine.

Step 1. Build the docker image

Build the docker image.

docker build -t reactjs-app-docker .

Docker build

Step 2. Run the docker image

Run the docker image.

docker run -p 3000:3000 reactjs-app-docker

Docker image

React app docker

Github: https://github.com/Jaydeep-007/reactjs-app-docker

Conclusion

In this article, we created a sample React JS application. After that, generate one Docker file and understand each step and purpose. Lastly, build a Docker image file and containerize it with the help of Docker commands.