How to Containerize a React Application Using Docker

1. Introduction

Deploying a React website using Docker can simplify your development workflow, ensuring consistency across different environments. In this guide, we will go through the process of containerizing a React application with Docker, setting up a Dockerfile, and managing the container lifecycle. Whether you are new to Docker or looking to enhance your deployment strategy, this tutorial will provide you with the essential steps to get your React app running in a Docker container efficiently and reliably. Let's get started!

2. Installing Docker

Installing Docker is straightforward, and you can easily search for instructions on Google or visit the official Docker website.

For quicker and more convenient installation, you can refer to the following articles based on your environment:

• Installing Docker on Ubuntu 20.04
• Installing Docker on macOS
• Installing Docker on Windows

After successful installation, check if Docker is running by using the command docker -v

If the Terminal outputs a line similar to the one below, Docker has been installed successfully.

Docker version 24.0.6, build ed223bc

3. Installing Docker Compose Plugin

First, check if any version of Docker Compose is already installed using the command docker-compose -v

If the Terminal outputs a line similar to the one below, Docker Compose has been installed successfully.

Docker Compose version v2.23.0-desktop.1

If Docker Compose is not installed, you can refer to the following sources to install the Docker Compose plugin:

• Installing Docker Compose on Ubuntu 20.04

• Installing Docker Compose on macOS

• Installing Docker Compose on Windows

4. Creating Configuration Files

4.1 Configuring NGINX

First, create a file named nginx.conf in the root directory of your project with the following content:

# nginx.conf

server {
    listen 80;

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

The purpose of this file is to configure Nginx, which we will install in the dockerfile. When a request comes to port:80, this configuration will point to the index.html file.

4.2 Creating the Dockerfile

Create a file named dockerfile with the following content:

# dockerfile
FROM node:18-alpine as build
WORKDIR /app
COPY . .
RUN yarn
RUN yarn build

FROM nginx:1.22-alpine as production
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

In this configuration, pay attention to the following two main commands:

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

This line copies the nginx.conf file we created earlier into the container.

COPY --from=build /app/build /usr/share/nginx/html

This command copies the project's build from build stage into nginx build folder.

Note: Typically, when building a website with React, after running the build command, the source generates a folder named build. You can change the folder name according to your current project.

4.3 Creating the Docker Compose File

Create a file named docker-compose.yml with the following content:

# docker-compose.yml

version: "3.8"

services:
  nginx:
    image: project_name
    restart: always
    build: .
    ports:
      - "8080:80"

Note that the port mapped to the outside is port:80, which is the port of Nginx that we configured earlier. When a request comes to port:8080 of the container, it corresponds to port:80 inside the container and will then be directed to the index.html file of the build directory that we copied earlier.

4.4 Creating the Docker Ignore File

Create a file named .dockerignore with the following content:

node_modules
build

5. Running the Container

After setting up everything, you need to run the following command:

docker-compose up -d --build

Note: You need to run the corresponding build command in your project beforehand.

Then you can access localhost:8080 to see the result.

To optimize further, you can write a script to save time.

#!/bin/sh
git pull origin
docker-compose up -d --build

# deploy.sh

Each time you want to deploy, just run the command bash deploy.sh. This script simply pulls the latest code, installs new npm packages if any, then builds the source and rebuilds the container.

6. Conclusion

After this tutorial, I hope you have learned a new way to deploy a client-side website. Apart from React as demonstrated, other frameworks like Vue, Angular, etc., can be deployed similarly since they are also client-side frameworks.

I hope you successfully implement this. In the next article, I will guide you on deploying a server-side website, such as: NextJS, NuxtJS,...