New project announcement
I shipped skillcraft.ai - a tool that helps you find the best learning resources tailored to your goals. All you need to do is tell it what you want to learn, and I’ll find the right resources to get you there.
Archived
Published
6 min read

Trevor I. Lasn

Building tools for developers. Currently building skillcraft.ai and blamesteve.lol

Integrating Docker with React

Streamline your development and deployment processes

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.

Terminal window
brew install docker

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

Terminal window
docker —-version
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.

Terminal window
npx create-react-app my-react-docker-app

Dockerizing a React App

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

Terminal window
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.
Terminal window
FROM node:alpine
WORKDIR /app
COPY package.json /app
RUN yarn install && yarn cache clean
COPY . /app
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.
  1. Dockerfile.dev: Similar to the Dockerfile, but optimized for the local development environment.
Terminal window
FROM node:alpine
WORKDIR /app
COPY package.json /app
RUN yarn install
COPY . /app
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.

  1. 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.
Terminal window
version: "3.8"
services:
client:
stdin_open: true
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "3000:3000"
volumes:
- "/app/node_modules"
- "./:/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.

Terminal window
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.
Terminal window
# Step 1: Build React app
FROM node:alpine as build
WORKDIR /app
COPY package.json /app/
RUN yarn install
COPY . /app
RUN yarn run build
# Step 2: Serve with Nginx
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

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

  1. 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.
Terminal window
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

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:

Terminal window
docker build -t my-react-app .
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.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.


Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
3 min read

HTML Details Element: The Native Accordion You're Not Using

Discover how the HTML details element can replace your JavaScript accordions and why it might be better than your current solution

Dec 10, 2024
Read article
Webdev
5 min read

SecretLint — A Linter for Preventing Committing Credentials

A guide to catching and preventing credential leaks in your code using Secretlint

Oct 22, 2024
Read article
Webdev
4 min read

Remove Unnecessary NPM Packages with eslint-plugin-depend

We don't need packages to handle basic JavaScript tasks

Aug 13, 2024
Read article
Webdev
4 min read

Mental Toughness is the Best Quality a Developer Can Have

Mental toughness gets developers through challenges like debugging, picking up new tools, and hitting tight deadlines. It’s about staying calm and pushing through when things get tough.

Sep 12, 2024
Read article
Webdev
5 min read

WebAssembly (Wasm): When (and When Not) to Use It

Understanding the real use cases for WebAssembly beyond the performance hype

Nov 25, 2024
Read article
Webdev
13 min read

10 Essential Terminal Commands Every Developer Should Know

List of useful Unix terminal commands to boost your productivity. Here are some of my favorites.

Aug 21, 2024
Read article
Webdev
4 min read

HTTP CONNECT: Building Secure Tunnels Through Proxies

Understand how HTTP CONNECT enables HTTPS traffic through proxies

Nov 28, 2024
Read article
Webdev
8 min read

Invisible columns in SQL

It’s a small feature, but it can make a big difference.

Aug 26, 2024
Read article
Webdev
7 min read

Tips for Reducing Cyclomatic Complexity

Cyclomatic complexity is like counting how many ways a car can go. More options make it harder to drive because you have to make more decisions, which can lead to confusion.

Sep 10, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/docker-with-react. It was written by a human and polished using grammar tools for clarity.