Dockerizing is the process of packing, deploying, and running applications using Docker containers. Docker is very popular among the developers. In this post, I am going to show you “How to Dockerizing the React Application?”. for local development and ready for production with great performance.
Before that I will briefly define what is docker and react.
What Is Docker?
Docker is an open source tool that combines your application with all the necessary dependencies and libraries as one portable package (docker image). That package can be shared to any one and run by anyone without much worrying about the operating system.
What is React ?
If you want to know more about react place check the tutorial at https://reactjs.org/tutorial/tutorial.html
Dockerizing is the process of packing, deploying, and running applications using Docker containers.
Docker and Node should be pre-installed in your machine. If you don’t have, please install form following link:
- Install docker form : https://docs.docker.com/engine/install/
- Install Node form : https://nodejs.org/en/download/
Dockerizing an App
React application can be decorize in following steps.
Step 1 : Create New React Application
Either your can use existing react application or create new react application. I will be creating small React App.
You can create a new React app by running the command below in your terminal.
npx create-react-app react-front-end
React app will be created and all the files and folders will be created inside
Also, I will add
docker folder to add
Here is the structure of the React App that we have created.
Step 2 - Create a
docker/react. This file should include following instruction. I am using multi-stage build.
In Stage 0 it will build and compile the frontend and in Stage 1 copy built assets from
Here, I have used the Nginx image. Nowadays, Nginx is more or less the “de facto standard” for static content serving.
If you want to know more about Nginx place check at https://www.nginx.com/
docker/nginx. This file should include following instruction.
You can add additional configuration if you need. But, you don’t have to worry much about Nginx configuration.
The official Docker Nginx image will do all almost everything for you.
Step 3 - Add a
docker-compose.yml in your project root. This
docker-compose.yml is not necessary, but it helps to build abd
run the docker image and container easily.
I have used following instruction in the docker file.
In local development you don’t need to use Nginx. But, it’s better to use the Nginx regardless of environments.
If you don’t want to use Nginx in your local development environment then you can replace
Dockerfile with following code and change
the port number in
docker-compose.yml file form
Step 3 - Add a
Just like the
.gitignore file, we need a
file as well so that docker knows what to ignore in the build process. We don’t need to include all files
inside image. Image should be light.
Following files and folders should be included in side
Why we are not including these files and folders in docker image?
- node_modules :
RUN npm install --silentfrom docker file will install
package.jsonfiles will be used to install dependencies.
- build :
RUN npm run buildfrom docker file will create build folder
- .dockerignore and docker-compose.yml : we don’t need both files inside container.
Step 4 - Build Docker Image
To build docker image, you have to run
docker compose build command. This command will take few minutes to
pull the node and nginx image, install dependencies, copy files, and create app image.
Step 5 - Run React Application
Now, you can run
docker compose up command. This command will start project in the container and
maps container’s internal port
80 to external port
1111. Open your browser in
docker compose up is successful, you can access your React app locally via web browser
Step 6 - Test the Application
Your app should be able to access your application locally at port number
You can browse
http://localhost:1111/ in your web browser, and you should be able to see following screen.
Finally, done. That’s it!
We have locally created React Application, dockarize and run the app. Hope this steps helped you to skill up.
Also, the dockarize app is ready for production with great performance. We should be thankful to Nginx for better performance.
Also, if you find any problem with app or any mistakes in this article, please post in the comment, it will automatically create a git issue.