Vanta Logo
SPONSOR
Automate SOC 2 & ISO 27001 compliance with Vanta. Get $1,000 off.
Published
6 min read
Up to date

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

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.

If you found this article helpful, you might enjoy my free newsletter. I share developer tips and insights to help you grow your skills and career.


More Articles You Might Enjoy

If you enjoyed this article, you might find these related pieces interesting as well. If you like what I have to say, please check out the sponsors who are supporting me. Much appreciated!

Tech
5 min read

Cloudflare Study: 39% of Companies Losing Control of Their IT and Security Environment

New research reveals a shocking loss of control in corporate IT environments

Oct 3, 2024
Read article
Tech
3 min read

Why Anthropic (Claude AI) Uses 'Member of Technical Staff' for All Engineers (Including Co-founders)

Inside Anthropic's unique approach to preventing talent poaching and maintaining organizational equality

Oct 23, 2024
Read article
Open source
5 min read

Can OSSPledge Fix Open Source Sustainability?

The Open Source Pledge aims to address open source sustainability challenges by encouraging companies to pay $2,000 per developer per year

Nov 17, 2024
Read article
Astro
5 min read

Add Auth to Astro 5 with Clerk in 5 Minutes

The simplest setup for adding Clerk authentication to your Astro project, with minimal code

Dec 18, 2024
Read article
Leadership
5 min read

What's the Number One Thing Holding Most People Back from Reaching Their Full Potential?

Discover the biggest obstacle to success in tech and learn how to overcome it

Sep 29, 2024
Read article
Leadership
3 min read

Amazon's 'No Weasel Words' Rule

How Amazon's emphasis on eliminating weasel words leads to more precise, actionable communication and better decision-making

Sep 17, 2024
Read article
Large language models
3 min read

When Will We Have Our First AI CEO?

Welcome to the future of corporate leadership. It's efficient, profitable, and utterly inhuman

Nov 4, 2024
Read article
Leadership
7 min read

Can Scrum Be Salvaged?

Scrum is failing engineering teams and what it's actually costing us

Nov 14, 2024
Read article
Css
4 min read

All You Need To Know About CSS-in-JS

An overview of CSS-in-JS and its relevance in modern web development

Nov 10, 2017
Read article

Become a better engineer

Here are engineering resources I've personally vetted and use. They focus on skills you'll actually need to build and scale real projects - the kind of experience that gets you hired or promoted.

Many companies have a fixed annual stipend per engineer (e.g. $2,000) for use towards learning resources. If your company offers this stipend, you can forward them your invoices directly for reimbursement. By using my affiliate links, you support my work and get a discount at the same!


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.