Run ReactJS application Via Docker Container in Ubuntu

In This tutorial we are going to configure below steps:-

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 Operating System?

What is Docker?

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.

What is Dockerfile?

A Dockerfile is a text file of instructions which are used to automate installation and configuration of a Docker image.

Dockerfiles make it easy to deploy multiple Docker containers without having to maintain the same image across multiple virtual machines.

Advantages of using docker :

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

Step 1) Install docker on your Ubuntu Operating System.

$ sudo apt-get install docker.io -y

Step 2) Install NODE & NPM on your System.

$ sudo apt update
$ sudo apt -y install curl dirmngr apt-transport-https lsb-release ca-certificates
$ curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -

$ sudo apt install nodejs -y

$ cd /var/www/html/
$ npx create-react-app myreact-app 

Step 3) Create a Dockerfile in your project directory.

$ cd /var/www/html/myreact-app

$ sudo vim 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

$ sudo docker build -t react-image .

Step 5) Create and Run Container From Docker Image

$ sudo docker images

Example : $ docker run --name container-name -d -p 3000:3000 Image_ID npm start

Command : $ docker run --name react-container -d -p 3000:3000 3f6f4fb34e17 npm start

$ docker ps -a 

Step 6) Create a docker hub account here https://hub.docker.com/signup (Optional)

After Creating Account do Login Docker hub From CLI 

$ docker login 

Step 7) Push docker image to the docker hub.  (Optional)

A) Find image id

$ sudo docker images

B) Add image to docker hub

Example : $ sudo docker tag IMAGE_ID DOCKER_HUB_ID/IMAGE_NAME:TAG_NAME

Command : $ sudo docker tag 641293b16b2a ramsingh1947/react-docker:latest

C) Push image to docker hub

Example : $ sudo docker push DOCKER_HUB_ID/IMAGE_NAME

Command : $ sudo docker push ramsingh1947/react-docker

Step 8) Pull docker image from docker hub.  (Optional)

(you can as well pull image in different system's) 

$ sudo docker pull DOCKER_HUB_ID/DOCKER_IMAGE_NAME