I dockerized my react app for the first time :D

In this post, I will be explaining how I dockerized a very simple react application. No theory, straight to the practice with a detailed example. So, let’s get started.

Pre-requisite: Basics of react.js, docker, and Nginx.

STEP 1: Create a basic react app using create-react-app: We don't want to waste our time creating a fancy looking app. Hence :

1. Make sure node.js is installed in your system
2. Open up a terminal and npx create-react-app <app-name>
3. Run npm run build. (This will create a /build folder in the root directory, which contains the build artifacts)

STEP 2: Write our Dockerfile:

Go to your project root directory and create a file named Dockerfile. There are two ways in which we can containerize the app.

• We can build the app entirely in the container
• We can create a build locally and push the build artifacts into the container.

2nd option is an efficient and preferred approach (explanation: maybe in the next post. xd.). Hence we are going to follow this approach.

The following will be the contents of our Dockerfile.

FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY /build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Dockerfile for react app ($2068975) · Snippets · React Flask Docker / react-ui

Let’s understand each line written above one by one.

• First, we pull the nginx image from the docker hub.
• Next. We will come to know shortly.
• In the 3rd line, we copy the build artifacts generated after npm run build into the public directory of Nginx.
• Next, we expose port 80 which is the default port of Nginx and our react application will be running at this port inside the container.
• The last line describes the commands to run when the container starts.

STEP 3: Add a .dockerignore file:

If you ever came across a .gitignore file in git, .dockerignore server similar purpose while building docker images. This file specifies which files or folders to ignore while copying contents to the file system of the container or building the image. So for our purpose, create a .dockerignore file in the project root and add the following lines into it.

.git
node_modules

STEP 4: Build the docker image:

Open up a terminal -> Go to the project root -> Run the below command

$ docker build . -t my-react-docker-image

This command will follow the instructions mentioned in the Dockerfile and create an image for us. We tagged(-t giving a name to our image) the image as my-react-docker-image. Now run docker images in the terminal and you can see your image listed there.

STEP 5: Run the container:

The last step is to run a container using the image created above. Run the following command in the terminal.

$ docker run -p 8001:80 my-react-docker-image

Here, we map port 8001 of our system (Your PC in this case) to port 80 of the container. You can give any value (in the allowed range obviously) except 8001.

Now open http://localhost:8001 in your browser and you can see a basic react app running like this.

From the author’s PC

As simple as that.

But that’s not all of it. Try refreshing or opening this page in a new tab. You might see a PAGE NOT FOUND error. This issue is sweetly addressed here.

QUICK FIX:

• Create a file called nginx.conf in your project root.
• Add the below contents into it

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;
    }

}

That’s it.

location / {
try_files $uri /index.html;
}

This tells nginx to look for the specified $uri. If it cannot find one then it sends index.html back to the browser.

The rest of the tasks will be done by the following line which we added in the Dockerfile earlier.

COPY nginx.conf /etc/nginx/conf.d/default.conf

This line basically overrides the default Nginx configuration with our config content. And Voila. You just ran your first dockerized react application :D.

Here’s the link to the complete codebase.

React Flask Docker / react-ui

Thanks!