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.
Top comments (0)