Template for Dockerizing React JS Application

Introduction

In the article, I will cover the template to dockerize React JS applications using Ubuntu as a base image to build the final docker image.

Prerequisite

Before starting with dockerizing, make sure to have the following prerequisites fulfilled:

1. Create a React Application for which you wish to create a docker image.
2. Understanding of Docker Basics
3. Local or Private Registry where you desire to build your docker image

Dockerfile

Docker can build images automatically by reading the instructions from a Dockerfile. A Dockerfile is a text document that contains all the commands a user could call on the command line to create a image. Using docker build, users can create an automated build that executes several command-line instructions in succession.

In layman’s language, Dockerfile is the template that stores the instructions required to be performed during the compilation and execution for creation of the image.

So, let’s understand the template for the ReactJS application:

FROM ubuntu:20.04

The first line of the Dockerfile defines the base image used to create the docker image.

ENV TZ=Asia/Calcutta

RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

It is the definition of setting the timezone based on your region.

Note: While building the image, you may find your screen stuck at the information requesting to enter a timezone. So, to avoid this issue, set the timezone in the Dockerfile.

RUN apt-get update -y && apt-get upgrade -y && apt-get install -y curl

apt-get update:

It updates each package and dependency to its latest version but will not download or install them.

apt-get-upgrade:

It downloads and installs the outdated packages or dependencies on the system.

apt-get install:

It installs all the required additional packages and dependencies for the application.

In the above command, curl gets installed.

RUN curl -sL https://deb.nodesource.com/setup_16.x -o /tmp/nodesource_setup.sh

RUN bash /tmp/nodesource_setup.sh

RUN apt-get install -y nodejs

RUN:

The RUN instruction will execute any commands in a new layer on top of the current image and commit the results. The resulting committed image will be used for the next step in the Dockerfile.

The base image ubuntu:20.04 does not provide the latest npm and nodejs version. So, to install a specific version of node js here 16.x I have used the PPA repository as mentioned in the above command.

PPA (personal package archive) is a repository managed by NodeSource.

1. In the first line, installation of PPA takes place to access its packages.
2. Then, execute nodesource_setup.sh.
3. Install nodejs. It will install the npm version compatible with the node js version 16.x

RUN node -v

RUN npm -v

Printing node and npm version to verify if it is >14.x

WORKDIR /usr/src/app/

It sets a work directory to execute all succeeding instructions in Dockerfile for ReactJs application.

COPY package.json /usr/src/app/

It copies package.json to the work directory.

RUN npm install

It installs all the dependencies and packages required to compile and run ReactJS applications on the server.

COPY . /usr/src/app/

It copies all files in the project.

EXPOSE 3000

EXPOSE instruction informs docker that the container listens on a specified network port at runtime.

CMD [“npm”, “start”]

The main purpose of a CMD is to provide defaults for an executing container. These defaults can include an executable, or they can omit the executable, in which case you must specify an ENTRYPOINT instruction as well.

Build & Deploy Docker Image

1. Build Docker Image:

docker build -f Dockerfile -t node_ubuntu_docker .

-f: Define docker file path

-t: Name of the image (tag by default latest)

. : Define the context for the build process

Once the build process is successful, you will see the following output:

Verify the image is created:

docker images | grep node_ubuntu_docker

(grep is used to filter only the image built by following above steps)

2. Run the Docker Image:

docker run -p 30001:3000 node_ubuntu_docker

-p: Map host port to container port

The docker image is compiled successfully, you can check your application on the server using the following link:

IP_of_the_Machine:Container_Port

e.g. xx.xxx.xxx.xxx:30001

After using run command verify the container is running:

docker ps

Wrapping Up

It is the demo project for the beginners to understand React JS application dockerization template. It explains what content will be required to create a Dockerfile and how docker build and deployment takes place.

To find the repository, follow the link.