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.
- Nodejs and docker installed in your computer.
- Have basic knowledge of docker.
- Good understanding of Node Package Manager (npm).
- Good knowledge in Reactjs fundamentals.
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
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
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 firstname.lastname@example.org: This SVGO version is no longer supported. Upgrade to v2.x.x. npm WARN deprecated email@example.com: 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 > firstname.lastname@example.org 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:
Now we can run container with command:
~ docker run react-app
> email@example.com 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
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
Now we can check the process that handle all the activities to run the react application in docker container.
~ docker ps