How to Containerized React App with Docker

Introduction

In this post we will walk through how to Containerized our React App with Docker Container, but before we get started we need to give answer to some questions.

What is Docker?

Docker is a tool designed that make creation, deployment, and running applications easier using Containers.

What is Docker Container?

Docker Container lets developers to wrap up an application with all of its libraries and dependencies and deploy it as one package so that the application will run faster and rest assure that it will run in any environment.

Prerequisites

We need to install Docker Desktop, It will make running, building, debugging, and testing of our Docker containerized app faster and easier.

Getting Started

Let us start off by first bootstrap our react app with create-react-app.

npx create-react-app containerized-react-app

After it has successfully created, let us go to containerized-react-app folder and start our app

cd containerized-react-app && yarn start

yarn start command will try to open up our app in the browser on default port 3000, if everything go as we expected we will see this on our browser

Now that we have assure that our react app is working perfectly, we move on to the next step.

Containerizing our React App

Before we containerized our App we need to understand some Docker terms that use to come up a lot when talking about Docker and good insight of these terms will give us strong understanding of Docker. They are Dockerfile, Docker Image, Docker Container.

Explanation:

1. Dockerfile is a blueprint for creating Docker Image, this file is read by Docker from top to bottom, then build to produce Docker image.
2. Docker Image is a text file that contain dependencies and configuration required by a program to run.
3. Docker Container is an instance of Docker image in running state. Example of Docker image and Docker container in real world would be OOP Class and Instance of that Class.

By having all these under our belts. Let us create Dockerfile on the root of our Project folder and type bellow commands:

# We install node:alpine base image that will give us everything we need to use on this environment
FROM node:alpine
# We setup up our working directory named 'app' we can name it anything 
WORKDIR '/app'
# We copy package.json file from our React App working directory(host) to the working directory we created above i.e app. you can also copy yarn.lock file also.
COPY package.json ./
# We run yarn install on the working directory
RUN yarn install
# Then we copy everything in our host to the working directory we created
COPY . .
# Lastly, is command that tells Container how to run this application and we can only have one command in a Dockerfile
CMD ["yarn", "start"]

Note: The Reason why we first do RUN npm install before we copy the other files and folders, it is because we do not want to be running npm install every time we change our code. Each lines in Dockerfile are known as layer or step whenever Docker is reading it and there is no changes it will cache it. So we want it to be cached.

Looking at the COPY . . command, it would copy everything in our host folder including node_modules folder that has a bunch of modules used by our React App, so in order to prevent it from that, we are going to add one more file called .dockerignore it works just like .gitignore. Then add node_modules to it.

node_modules

Next step is to build our Docker image

docker build -t yourusername/containerizedreactapp:1.0 .

What this docker command does is build us docker image and name it using tag -t yourusername/containerizedreactapp with version 1.0, and dot that tells it to build in current directory. For my own username I used muisoft.

After successfully build our Docker image, let us verify our Docker image we just build

docker images

Finally, we run our Docker image

docker run -it -p 3000:3000 muisoft/containerizedreactapp:1.0

Explanation:

• We use docker run command to run our image.
• We also did port forwarding -p 3000:3000, we mapped port 3000 (you can use any port number) to the port exposed by our container and that port is from react-script when you use create-react-app to bootstrap react app by default when you run start command it will open browser on port 3000.
• And we supply name of the image we wanted to run and its version number.

Note: Without port forwarding we will not be able to access our app on the browser.

That is it…

In the next post we are going to discus how to deploy our containerized react app to Amazon ECS.

Thanks for reading :)