Hello everyone, today we’ll focus on the process of Dockerizing React projects. As we know, React is a frontend library, and it’s important to Dockerize projects when moving them to the production level. This is crucial because it ensures the project runs smoothly without being affected by variables such as hardware, operating systems, environments, dependencies, or versions. Docker will greatly simplify this process for us. We’ll also use Nginx, a widely known tool in the industry, to serve our project.
What is Nginx?
Nginx is an open-source web server, reverse proxy server, and load balancer that is lightweight and high-performance. Initially developed in 2004, Nginx can respond to high demands even with low hardware requirements. One of Nginx’s key features is its ability to manage thousands of concurrent connections simultaneously.
What is Nginx Configuration File (nginx.conf)?
The nginx.conf file is the configuration file for the Nginx web server. This file determines how Nginx will operate, which websites or applications it will serve, which ports it will listen on, and many other details. The nginx.conf file contains the basic configuration parameters of Nginx and is typically found in a directory such as /etc/nginx/.
What is Docker?
Docker is an open-source platform that accelerates the development, distribution, and running processes of software applications. As a containerization technology, Docker packages applications into lightweight, portable, and self-sufficient units known as containers. Each container includes all necessary components such as the operating system, application code, system tools, system libraries, and configurations. This enables applications to run smoothly in different environments and increases consistency between development and deployment.
Docker is particularly prevalent in modern software development and deployment processes, such as microservices architectures and cloud-based deployments. Dockerizing frontend projects, such as those built with React.js, makes the development, testing, and deployment processes more manageable and repeatable.
What is Dockerfile?
A Dockerfile is a text file that contains step-by-step instructions for building Docker containers. This file defines how a Docker image will be configured and specifies the characteristics of the container to be built on top of that image. The Dockerfile is typically located within the project directory and is used via the Docker CLI (Command Line Interface).
Steps
Now we will look at how you can dockerize your React project using an Nginx server, step by step.
Step #1 (Nginx Configuration)
First, create a file named nginx.conf in the root folder of your project. Add the following code to the created file.
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}This file contains the necessary configuration for React applications. For instance, when you want to go to /subpath of your project, you actually make a GET request to the /subpath address. However, in React projects, regardless of which path you want to go, you always need to be met with the index.html file in the root directory. Otherwise, getting a 404 error is inevitable. Therefore, the file we added contains the required configuration and directs the user to the index.html file in the root path for every path they want to go to.
Step #2 (Dockerfile)
Secondly, create a file named Dockerfile in the root folder of your project without any file extension. Add the following code to the created file.
FROM node:alpine as build-stage
COPY . /app
WORKDIR /app
RUN npm install -s
RUN npm run build
RUN rm -rf /app/build/static/js/*.map
FROM nginx:alpine as production-stage
COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/build /usr/share/nginx/html
EXPOSE 80This Dockerfile sequentially builds your project, removes the mapping files, and configures Nginx to serve your project on port 80.
Step #3 (Docker Build & Run)
The final step is to dockerize your project. You are ready to go. Open a terminal in the root folder of your project and execute the command below after updating it as needed to get your image.
docker build -t <image-tag> .You can run the following command to check the image you build.
docker run -p 3000:80 <image-tag>Today we learned how to Dockerize our React project using an Nginx server. If you have any questions or stuck at any point in the article, we can discuss them in the comments. Thank you very much for reading, that’s all for now.