How to dockerize Reactjs app

In this post, sequel to the first part of this series, we are going to dockerize Reactjs application.
First, let's have a quick overview of this post;
1.) What and Why Docker?
2.) What are the Requirements?
3.) What are the steps and processes involved?
While the end goal is to dockerize our app and push that image to Amazon ECR and run that app on Amazon ECS. Deployment and DevOps on AWS ECS will be well explained in the third part.

1.) What and Why Docker?

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. Think of it as best alternative to virtual machine.

Why docker?
There are many reasons to use docker but I will just mention few; a.) Modern applications come with loads of dependencies, and having to install everything on every environment you want to run it on, or worse yet, run it on a shared environment with other apps perhaps requiring other versions of the same libraries, is complicated. With your app residing on a docker image all you do is pull the image and run it, docker handles the rest. b.) Docker reduces the need for more infrastructure resources for development and the container created for individual processes can be shared with other apps with instances of these containerized apps using less memory compared to virtual machines – it makes the development and deployment process more cost-effective.

2.) What are the Requirements;

a.) Existing code/app that you would like to containerize.
If you are starting from scratch;
Check SETTING UP CLIENT SIDE of my previous post Here or download this repo from my githubHere
b.) Code editor, preferably VS Code
c.) Docker Desktop Install
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
or follow the official documentationHere
d.) Docker file (to build the Docker image)

3.) What are the steps and processes involved?

After we get all the requirements ready, we can now further to Dockerize React App and later to AWS ECS for Production, where we need to follow the steps below:
1.) Firstly, set up the reactjs source code.
Then, we need to Dockerize the React app.
2.) Create a Dockerfile and docker-compose.yml file in the root of the app.
3.) Populate the Dockerfile and docker-compose.yml with with set of instruction and argument.
4.) Run build command.
5.) Push the docker image to a repository.

3.1.) set up the reactjs source code.
Using exiting source code or npx create-react-app my-app
Run npm start command to run dev the app.

3.2.) Dockerize React app.
I assume by now, you already have react app and docker installed on your local machine.
Now let's create a Dockerfile and docker-compose.yml in the root of the app.

In this file structure, the three files to focus on are:

• Dockerfile
• docker-compose.yml
• .dockerignore

3.3.) Populate the Dockerfile and docker-compose.yml
Actually we are doing following with our dockerfile:

• Downloading a base image from dockerhub
• Defining a working directory for our container
• Copying package.json file and place it in container working dir
• Installing our npm dependencies
• Copying rest of the project files

Dockerfile content;

# get the base node image
FROM node:alpine as builder

# set the working dir for container
WORKDIR /app

# copy the json file first
COPY ./package.json /app

# install npm dependencies
RUN npm install

# copy other project files
COPY . .

# build the folder
CMD [ "npm", "start" ]

Now, we have a dockerfile with all instructions that we need in order to create our docker image. Let's now define and create our container using docker-compose.yml file.

docker-compose.yml content;

version: '3'
services:          
    app:
        build: .     
        container_name: frontend
        ports:
            - "3000:3000"
        image: app:react
        volumes: 
            - .:/app
            - /app/node_modules
        command: npm start

.dockerignore content;

node_modules
npm-debug.log

3.4.) Run build command.
Now let's run it locally to see if it works.
First we build our docker image.
docker build --tag react .
Then we run it
docker run -p 3000:3000 -d react

• Detached mode, shown by the option -d, means that a Docker container runs in the background. It does not receive input or display output. Now your React app should be available again at [http://localhost:3000/] Now, in order to check our production environment locally let's run following command: docker-compose up

You are finally done with dockerizing your application and also succeeded in moving to a microservices architecture.

3.5.) Push the docker image to a repository.
Next, we push the docker image to a repository. Let's use a dockerhub public repository through the command line or using Docker Desktop. Create a username and repo name in all the files.
Now we can push it to our dockerhub public repository.
docker push <your username>/<reponame> --all-tags

Now the image is pushed to dockerhub public repository and accessible to everyone. We are going to be pulling it on our ec2 instance next.
We have come to the end of How to dockerize Reactjs app

Next; Catch up with me on How to implement DevOps Approach practically with a webapp project from my next post

Thanks for reading!

Connect with me: Linkedin