ReactJS is one of the most famous JavaScript frameworks in the world right now. And docker has become one of the best hosting platforms. So in this guide, we will look into how to dockerize a react application. If you wish to learn more about docker react app and get a certificate in ReactJS, you can use React JS certification training, which is one of the best React courses offered by Knowledgehut.
Why Docker?
Docker is one of the most used platforms in the world. With Docker, developers can containerize their application (Back end or front end) by combining the application source code with the operating system and the libraries, required to run the application, so that the containerized image file can be run in any environment. Because of that, developers don’t need to stick to a single cloud platform. If any platform supports docker, then they can easily change the platform when required.
How to Dockerize a React App? Step-by-Step
As I said, you can dockerize both back-end and front-end applications. So in this article, we’ll see how to dockerize a react js app to dockerize the project. We will be using multi stages as well.
For this docker react app guide, you need a react project. You don’t need high-level knowledge of docker since this is a beginner's guide. You can follow the steps mentioned in this react dockerize guide.
Step 1: Create a React Project
First thing first. Let’s create a react project. You can use this command to do that.
npx create-react-app react-docker
Once the project creation is done, you can open the project in your favorite code editor, like VS Code, Atom...etc. And of course, you can run the application with yarn start. Yarn is the new package manager used in react project instead npm.
So to work with docker, we need three files. A .dockerignorefile, Dockerfile, and a docker-compose file. I’ll add the folder & file structure here so that you can get an idea of where to put those files.
As you can see, all files are added inside the src directory. But, if you prefer, you can add your docker-compose.yml file outside the src directory. Along with the project folder. That approach is used when you have multiple projects in a single repo.
Step 2: Add a .dockerignore File
Just like the .gitignore file, we need a .dockerignore file as well so that docker knows what to ignore in the build process. There are two ways of creating this file. Either you can create it manually. Or you can use touch .dockerignore command in your terminal. You should get your .dockerignore file like this.
In the .dockerignore file, let’s add the necessary directories which we need to exclude in the build process. I’m going to add the node modules folder since we usually exclude it. Other than that, you can add your .env files as well, if you wish to exclude those.
Step 3: Add a Dockerfile
To give the build instructions, we need to create a Dockerfile that contains those instructions.
Here too you can create the file in two ways. Either manually or using the
touch Dockerfile command. Note that, the file name should start with capital D.
Then, we need to add the build instructions.
- Although react is not a node application, it needs to use node to build the application. So as the first step, we have to import node.
- The next step is to define a working directory. Usually, we use /app for that.
- As the next step, we need to copy the package.json and the .lock file. If you are using npm, this will be package-lock.json. If you are using yarn this will be yarn.lock. Otherwise, we won’t be able to use yarn/npm commands in the next layer. These files should be copied to the working directory which we defined above. For that, we add a . after the copy command. But copying the yarn.lock file is not required. You can exclude
COPY yarn.lock . if you like.
- In the next step, we have to install all the dependencies which we used in the project. So you have to run yarn install or npm install
- After that, we need to copy the rest of the content to the working directory
- Then we do a build with yarn build
- In stage 2, we are going to create a new image using the above create image with Nginx. Nginx is used to develop server-side applications. So the first step is to import Nginx.
- Then we are going to create and set a new working directory in our new image.
- The next step is to remove default Nginx static resources
- Then we need to copy the 1st stage’s static resources onto the current image
- Finally, we need to give instructions to run the application inside the container with ENTRYPOINT. For this, we have to use an array of strings.
Note that when using Nginx, in the import section, I have used just Nginx with version 1.19.0. This is not a production optimized version. Because of that, your image size will be a bit higher. But when it comes to production build, file size matters. So the solution is to use Nginx alpine version instead normal version. Just like node is important in the beginning. If you use the alpine version, you can reduce the file size to 20 MB -40 MB range.
Step 4: Creating the Docker Image
Now we have given the build instructions. It’s time to create the docker image. For that, we need a docker-compose file. Same as above files. You can either create the file manually. You can also use the command below.
touch docker-compose.yml
Let’s create the docker-compose.yml file.
Let’s add our react project to the docker-compose.yml file as a service.
- Here we have to define a version in the root of the file. This is the docker-compose version currently being used. According to the docker documentation, it’s 3.8.
- Then we need to configure our application inside the compose file, as a service.
- Note that we need to keep the indentations correctly when defining properties in this file.
- The first property is the container name. This will create the container with the given name if the container doesn't exist.
- Then the image name. This will create the image with the given name if the image doesn’t exist.
- For the ports, I have defined 8080 as the hosting port, and 80 as the container port
There you go. Now, all the files are created and completed.
Step 5: Running the Docker Image
First things first, in our Dockerfile you can see that we have a command saying
COPY yran.lock
But in the project, we have a package-lock.json. So what we need to do is first delete the existing package-lock file. Then run yarn install so that it will generate a new yarn.lock file.
This is really important, without a yarn.lock file, you won’t be able to create the image file with the mentioned approach.
Next, to run the docker image, you can use the below command
docker compose up
If you are not in the root folder, you have to specify the name of the docker compose file. Use the below command in a situation like that.
docker-compose -f docker-compose.yml up
Go ahead and execute one of these commands in your terminal. You should see the building process. Once the building process is completed, you should be able to navigate to http://localhost:8080/
Knowledgehut offers a great Web Development courses for anyone who wants to continue their learning. You can check out that course as well.
Unlock the Power of Python: Master the Language with Our Online Course for Python! Dive into the world of coding and unleash your creativity with Python. Join now and become a Python pro in no time. Enroll today!
Conclusion
So in this guide, we have learned how to dockerize a react application. We have looked into the process of dockerizing a react app, and the necessary files and codes for that. If you open your docker desktop application, you will be able to see that the newly created image and the container are running. You can use that application to monitor logs as well. You can refer to the best React course KnowledgeHut to gain all the necessary information regarding React JS.
![How to Dockerize a React Application? [Step-by-Step Guide]](/_next/image?url=https%3A%2F%2Fd2o2utebsixu4k.cloudfront.net%2Fmedia%2Fimages%2F8ff14a11-7dab-48d9-bb44-83812d348ffb.png&w=1920&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
