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.

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.

STEP 4: Build the docker image:

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

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.

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

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.

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.

Thanks!

Technology Enthusiast | Software Engineer | Distributed Systems

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store