Containerizing / Dockerizing React Application

Docker

Docker is a containerizing tool used in the development and deployment of the application. Docker is build on the top of the low-level operating system that enables to run one or more containerized activities. A single container can manage all the dependencies and packages that are required for running the applications. Docker is mostly used in linking small and independent microservices. It is a future of managing applications.

React

React is an open source client side javascript library for building user interface.It is developed by facebook in 2013. It is most popular and mostly used in developing single page application. Popular web application such as Airbib, Netflix, Facebook, Instagram, Uber etc are developed using React.

Prerequisites

• Nodejs and docker installed in your computer.
• Have basic knowledge of docker.
• Good understanding of Node Package Manager (npm).
• Good knowledge in Reactjs fundamentals.

Create react application with command

npx create-react-app <application-name>

I am going to enter npx create-react-app containerizing-react. It will create a react application with some boilerplate which is well structured and good to start. Now,you can see the directory named containerizing-react that you have entered and change the directory with cd containerizing-react.

The project structure is like

containerizing-react
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   ├── setupTests.js
├── package-lock.json
├── package.json
├── .gitignore
└── README.md

Lets start the application development server with command

~ npm start

🎉 React application is running successfully in http://localhost:3000.

Lets containerize the application

Dockerfile

First of all, we need to create a file named Dockerfile in the project root directory. It is an extension less file which contain text based scripts. It is mainly used to build or create a container image.

Lets build our first container image with command:

~ docker build -t react-app .

Then we will see in our terminal that the scripts are executed one by one.

Sending build context to Docker daemon  1.622MB
Step 1/7 : FROM node:16-alpine
 ---> 97c7a05048e1
Step 2/7 : WORKDIR /app
 ---> Running in 2832d158ca49
Removing intermediate container 2832d158ca49
 ---> 33ade59f6284
Step 3/7 : ENV PATH = "/app/node_modules/.bin:$PATH"
 ---> Running in e5e7e9045da0
Removing intermediate container e5e7e9045da0
 ---> eb050a83b5f5
Step 4/7 : COPY . .
 ---> 135c29f9e54d
Step 5/7 : RUN npm install
 ---> Running in 557411353bd1
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

added 1418 packages, and audited 1419 packages in 41s

190 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

Removing intermediate container 557411353bd1
 ---> 00c1f9fa2dbb
Step 6/7 : RUN npm run build
 ---> Running in c1defd1c15b8

> [email protected] build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  46.37 kB  build/static/js/main.226971af.js
  1.79 kB   build/static/js/787.af11c2dd.chunk.js
  541 B     build/static/css/main.073c9b0a.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Removing intermediate container c1defd1c15b8
 ---> 616ac7e40e6a
Step 7/7 : CMD ["npm","start"]
 ---> Running in 7f2dd4af9523
Removing intermediate container 7f2dd4af9523
 ---> f8a7e190bb57
Successfully built f8a7e190bb57
Successfully tagged react-app:latest

So container image named react-app is created successfully. Now we can check the docker images in our system with command:

docker images

Now we can run container with command:

~ docker run react-app

> [email protected] start
> react-scripts start

Starting the development server...

Compiled successfully!

You can now view containerizing-react in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.17.0.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Development server is starting in two host i.e in Local and in Network. Lets open the above link in browser.
Lets open in the network: http://172.17.0.2:3000

Lets open in the local server: http://localhost:3000

We are getting issue with local server because react uses port: 3000 and we haven't expose port in the container so we have to expose or map port across the container to our machine.

~ docker run -p 3000:3000 react-app

Lets check again the local server in browser

🎉 Finally our containerized react application in running successfully in port 3000 in both network and local server.

Now we can check the process that handle all the activities to run the react application in docker container.

~ docker ps

Finally we have successfully containerized the react application with docker.

View Source Code