Integrating Docker with React

Docker is one of the most popular tools for running applications in isolated environments known as containers.

Containers ensure that your application behaves consistently no matter which machine it’s running on. They solve the common problem of “it works on my machine” by packaging your code and dependencies together.

What is a Docker Container?

A Docker container is a standardized unit of software that bundles your application’s code with all the dependencies it needs to run.

Multiple containers can run on the same machine, sharing the host’s operating system kernel, but each container has its own isolated filesystem and allocated resources.

Traditionally, when deploying an application, you would need to manually install all required software (like MySQL, Node.js, or Redis) on the host system.

Docker simplifies this process by allowing you to define everything your application needs in a Dockerfile. This file is used to create a Docker image that can be reused across different environments. These images can be stored in repositories, making it easy to share and deploy your containers.

Think of Docker containers as lightweight, portable environments that have everything your application needs to run, but they share the underlying system’s kernel.

Why Use Docker?

Here are a few reasons to consider using Docker:

1. Predictable Environments: Docker ensures that your application runs the same way in development, testing, and production environments.
2. Solves Compatibility Issues: By isolating your app and its dependencies, Docker avoids conflicts that arise from different machine setups.
3. Reusability and Sharing: Docker images can be easily shared across projects and teams, enabling faster setup and deployment.

Installing Docker

Docker is available on multiple platforms. You can download and install it from the official Docker website. Here’s how we can install Docker via Homebrew.

1
brew install docker

After installation, confirm it’s working by opening your terminal and typing docker —version.

1
docker —-version
2
Docker version 19.03.8, build afacb8b

If you see the Docker version listed, the installation was successful. If not, you may need to reinstall or restart your machine.

Creating a React Project

The create-react-app tool sets up a modern React project for you, focusing on the frontend. It uses tools like babel and webpack under the hood to help you build your application.

1
npx create-react-app my-react-docker-app

Dockerizing a React App

To Dockerize your React app, you need to create three key files:

1
touch Dockerfile Dockerfile.dev docker-compose.yml

1. Dockerfile: This file contains the instructions for building a Docker image for your project, used for production environments.

1
FROM node:alpine
2

3
WORKDIR /app
4

5
COPY package.json /app
6

7
RUN yarn install && yarn cache clean
8

9
COPY . /app
10

11
CMD ["yarn", "run", "build"]

The Dockerfile creates a production-ready Docker image for your React app:

• Pull Node.js: Uses a lightweight Node.js image (node:alpine).
• Set Directory: Defines /app as the working directory.
• Copy package.json: Prepares for dependency installation.
• Install Dependencies: Installs and cleans up dependencies.
• Copy Files: Copies all app files into the container.
• Build App: Runs yarn run build to create a production build.

2. Dockerfile.dev: Similar to the Dockerfile, but optimized for the local development environment.

1
FROM node:alpine
2

3
WORKDIR /app
4

5
COPY package.json /app
6

7
RUN yarn install
8

9
COPY . /app
10

11
CMD ["yarn", "run", "start"]

The difference between the production and development Dockerfile is that the production version runs the build script as the final command.

3. docker-compose.yml: This file defines and runs multi-container Docker applications. It links different services together (like your React frontend and any backend services) and manages them with a single command.

1
version: "3.8"
2
services:
3
  client:
4
    stdin_open: true
5
    build:
6
      context: .
7
      dockerfile: Dockerfile.dev
8
    ports:
9
      - "3000:3000"
10
    volumes:
11
      - "/app/node_modules"
12
      - "./:/app"

The docker-compose.yml file sets up and runs multiple Docker containers. It defines a service called client for your React app, running it in an isolated environment.

The file also maps port 3000 on your machine to port 3000 in the container, so you can access your app at localhost:3000. It also mounts your app’s files and node_modules directory to keep the container and your local environment in sync.

Running Docker Compose

Once you’ve written the necessary Docker files, run the docker-compose up command.

1
docker-compose up

Docker will build your services according to the configurations specified, and your React app will be available at localhost:3000

For a production environment, you’ll likely need to serve the final build of your React application using a web server like Nginx.

Nginx

1. Build your React app using the yarn run build command inside the container.
2. Use an Nginx Docker container or install Nginx on your host machine.

1
# Step 1: Build React app
2
FROM node:alpine as build
3
WORKDIR /app
4
COPY package.json /app/
5
RUN yarn install
6
COPY . /app
7
RUN yarn run build
8

9
# Step 2: Serve with Nginx
10
FROM nginx:alpine
11
COPY --from=build /app/build /usr/share/nginx/html
12
COPY nginx.conf /etc/nginx/nginx.conf
13

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

Nginx can efficiently serve your static files, handle requests, and provide additional features like load balancing and SSL termination.

3. Configure Nginx to serve the contents of the build directory, which contains the compiled React application. This setup ensures your React app is optimized for production and ready to handle traffic.

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    location / {
6
        root   /usr/share/nginx/html;
7
        index  index.html index.htm;
8
        try_files $uri $uri/ /index.html;
9
    }
10

11
    error_page 500 502 503 504 /50x.html;
12
    location = /50x.html {
13
        root /usr/share/nginx/html;
14
    }
15
}

Build and Run the Nginx Container In Production:

Once you have your Dockerfile and nginx.conf set up, you can build and run your Nginx Docker container:

1
docker build -t my-react-app .
2
docker run -p 80:80 my-react-app

When you build and run the Nginx Docker container, it will serve your React application in a production environment.

Running on a VPS:

To deploy this setup in a production environment, you’ll typically run these Docker commands on a Virtual Private Server (VPS).

A VPS provides the necessary infrastructure to host your application publicly, allowing it to handle real-world traffic.

Steps for Deployment on a VPS:

1. Access Your VPS: SSH into your VPS where you’ll run these Docker commands.
2. Build the Image: Use the docker build -t my-react-app . command to create the Docker image on the VPS.
3. Run the Container: Start the container with docker run -p 80:80 my-react-app to serve your application on the server’s public IP address.

Your React app will be accessible through the VPS’s IP address or domain name, effectively making it live for users.