Dockerizing ReactJS application in Ubuntu

This post explains,

1. How to build a docker image?
2. How to push & pull images from the docker hub?
3. How to run the application in docker on the Ubuntu system?

What is docker?

• Docker is a tool designed to make it easier to deploy and run applications by using containers
• Docker is a platform used to containerize your software, using which you can easily build your application, package them with the dependencies required for your application into the container and further, these containers are easily shipped to run on other machines.
• Docker is a container-management service and is performed on the system-level.
• It works like a client-server application
• It’s a layered architecture
• Docker images run in docker platform

Advantages of using docker :

• Rapid application deployment
• Portability across machines
• Version control and component reuse
• Sharing
• Lightweight footprint and minimal overhead
• Simplified maintenance

How do we create docker images?

Step 1:

Install docker your system by following the instructions given in the link. https://docs.docker.com/install/linux/docker-ce/ubuntu/

Step 2:

Create ReactJS application

Install : 
        $ npm install -g create-react-app
Create project : 
        $ create-react-app PROJECT_NAME 

Step 3:

Create a Dockerfile in your project directory. The file name should be Dockerfile without any extension.

Dockerfile:

FROM node:latest
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app/
RUN npm install
ADD src /usr/src/app/src
ADD public /usr/src/app/public
EXPOSE 3000
CMD ['npm', 'start']

Step 4:

Build a docker image

Run in project root directory:
Example : $ sudo docker build -t IMAGE_NAME .
Command : $ sudo docker build -t react-docker .

The above command will start building the image and echos success message with image id on the completion. If want to see the created image, run the following command.

$ sudo docker images

Step 5:

Create a docker hub account here https://hub.docker.com/signup

Step 6:

Push docker image to the docker hub. This can be accomplished by running the following commands.

Step 1: Find image id
Command : $ sudo docker images
output is:
REPOSITORY    TAG       IMAGE ID            CREATED             SIZE
react-docker  latest    641293b16b2a      7 minutes ago       1.13GB

Step 2: Add image to docker hub
Example : 
$ sudo docker tag IMAGE_ID DOCKER_HUB_ID/IMAGE_NAME:TAG_NAME
Command : 
$ sudo docker tag 641293b16b2a raguct25/react-docker:latest

Step 3: Push image to docker hub
Example : $ sudo docker push DOCKER_HUB_ID/IMAGE_NAME
Command : $ sudo docker push raguct25/react-docker

Step 7:

Pull docker image from docker hub

Example : $ sudo docker pull DOCKER_HUB_ID/DOCKER_IMAGE_NAME
Command : $ sudo docker pull raguct25/react-docker

Step 8:

Run docker image

Run without PORT:
Example : $ sudo docker run DOCKER_IMAGE_NAME RUN_COMMAND
Command : $ sudo docker run react-docker npm start
RUN with PORT:
Example : 
$ sudo docker run -it -p 3000:3000 DOCKER_IMAGE_NAME RUN_COMMAND
Command : 
$ sudo docker run -it -p 3000:3000 react-docker npm start

Docker commands :

View images : docker images
View containers : docker ps
Remove images : docker rmi IMAGE_NAME
Remove force images : docker rmi -f IMAGE_ID
Remove images with tag : docker rmi IMAGE_NAME:TAG_NAME
Remove container : docker rm CONTAINER_ID
Stop container : docker stop CONTAINER_ID
How many containers are present on the host now : docker ps -a
Containers details : docker inspect CONTAINER_NAME

Thank you!