Dockerize A ReactJS App

Introduction 

 
In the earlier articles (Article 1Article 2 - Article 3), we learned about the usage and installation of Docker in a Windows application. Now let's start learning how to integrate Docker in a React Application.
 
Dockerize a ReactJS App
 
Getting started…

Step 1
 
Launch docker-machine or Docker Desktop
 
Dockerize a ReactJS App 
 
Step 2
 
React Project Setup - Create React application using the create-react-app command

Install Create React App globally:
  1. $ npm install -g create-react-app@3.4.1 
Create a New Project
  1. $ create-react-app dockeApp  
  2. $ cd dockerApp 
Step 3 - Docker Configuration in React Project

Add a Dockerfile to the project root name it 'Dockerfile' without any file extension, then write the following instructions of code in the Dockerfile and save it.
  1. # pull the official base image  
  2. FROM node:13.12.0-alpine  
  3.  
  4. # set your working directory  
  5. WORKDIR /app  
  6.  
  7. # add `/app/node_modules/.bin` to $PATH  
  8. ENV PATH /app/node_modules/.bin:$PATH  
  9.  
  10. # install application dependencies  
  11. COPY package.json ./  
  12. COPY package-lock.json ./  
  13. RUN npm install --silent  
  14. RUN npm install react-scripts@3.4.1 -g  
  15.  
  16. # add app  
  17. COPY . ./  
  18.  
  19. # will start app  
  20. CMD ["npm""start"
This code will copy the 'app' folder from the project and install all dependencies by referencing the package.json file and then create a production build of the React App using a Node image.
 
Step 4 - Now add a .dockerignore

This file is not mandatory, but it's a good practice to have this file which can help to boost the build process and make Docker Image to build unnecessary code and files.
  1. node_modules  
  2. build  
  3. .dockerignore  
  4. .git  
  5. .md  
  6. .gitignore 
Step 5
 
Create a Docker Image / Build Docker Image

Let's run the docker build command which will help us to create Docker Image with React App.
  1. $ docker build -t dockerizing:dev . 
Note
Here, dockerizing is my app name. Make sure the image name is followed by the dot which means that the path of the Docker build context and Dockerfile is the current folder.

Dockerize a ReactJS App 
 
This installation process will take 1-2 minutes to complete, and at the end, you will get a successful message with the image tag name.
 
Dockerize a ReactJS App 
 
After a successful build, you can see the Docker images in Docker Containers using the below command in the console.
  1. $ docker images 
Dockerize a ReactJS App
 
In case you're using Docker Desktop, then you can see Docker Image in Docker Desktop. Just need to open Docker Desktop
 
Dockerize a ReactJS App 
 
Step 6
 
Run the Docker Container
 
Dockerize a ReactJS App 
 
Dockerize a ReactJS App
 
After successfully run Docker Container, Docker Desktop will provide the URL which can be run in browser, So let's open the browser and type URL HTTP://<docker machine url>:80 in the address bar.

From my Docker Desktop - it's http://localhost:3000  or  http://172.17.0.2:3000
 
Dockerize a ReactJS App
 

Summary

 
In this article, We've learned Dockerize React application, This approach is on beginner level - Docker provides large enhancement with its best use, so after learned beginner level Dockerizing you should learn more in detail development and production environments configuration.