Dockerizing a React App: A Step-by-Step Guide with Code Example

4 min readMay 1, 2023

As a professional React developer, Dockerizing a React app is a crucial skill that can save time and streamline the development process. Docker is a containerization tool that enables developers to package an application and its dependencies into a single container. Docker is incredibly useful in creating consistent development environments, eliminating the need for complicated installation and configuration processes.

In this article, we’ll walk through the process of Dockerizing a React app with a code example. We will use a simple React app created with Create React App to demonstrate how to containerize a React application.

Prerequisites

Before we get started, we need to ensure we have the following prerequisites installed on our machine:

Docker — you can download it from the official website here.
Node.js — you can download it from the official website here.

Step 1: Create a React App

We’ll start by creating a simple React app using Create React App. Open your terminal and run the following command:

npx create-react-app my-react-app

This will create a new React app with the name my-react-app.

Step 2: Build the React App

Once the app is created, we need to build it before we can Dockerize it. Open your terminal and navigate to the root directory of the app, then run the following command:

npm run build

This will build the app and generate a build directory containing the static assets that we will serve with Docker.

Step 3: Create a Dockerfile

Next, we need to create a Dockerfile in the root directory of the app. The Dockerfile is used to specify the environment in which the app will run. Open your favorite text editor and create a new file named Dockerfile in the root directory of your app. Add the following code to the file:

# Specify the base image
FROM node:alpine

# Set the working directory
WORKDIR /app# Copy the package.json and package-lock.json files
COPY package*.json ./# Install the dependencies
RUN npm install# Copy the app files
COPY . .# Build the app
RUN npm run build# Expose the port
EXPOSE 3000# Run the app
CMD ["npm", "start"]

This Dockerfile specifies a base image of node:alpine, which is a lightweight version of Node.js. We set the working directory to /app, copy the package.json and package-lock.json files, install the dependencies, copy the app files, build the app, and expose the port 3000. Finally, we set the command to run the app with npm start.

Step 4: Build the Docker Image

Now that we have a Dockerfile, we can use it to build a Docker image. Open your terminal and navigate to the root directory of your app, then run the following command:

docker build -t my-react-app-image .

This will build a Docker image with the tag my-react-app-image.

Step 5: Run the Docker Container

With the Docker image built, we can run a Docker container. Open your terminal and run the following command:

docker run -p 3000:3000 my-react-app-image

This will start a Docker container and map port 3000 on your machine to port 3000 in the container. You should now be able to open your web browser and navigate to http://localhost:3000 to see your React app

Step 6: Test the Dockerized React App

To confirm that the Dockerized React app is working, open your web browser and navigate to http://localhost:3000. You should see your React app running inside the Docker container.

Step 7: Publish the Docker Image

Finally, we can publish the Docker image to a container registry such as Docker Hub or Amazon ECR. This will make it easier for other developers to use the image in their own projects. To publish the image to Docker Hub, follow these steps:

Create a Docker Hub account if you don’t already have one.
Log in to Docker Hub using the docker login command in your terminal.
Tag the Docker image with your Docker Hub username and the app name using the following command:

docker tag my-react-app-image your-docker-hub-username/my-react-app-

Push the Docker image to Docker Hub using the following command:

docker push your-docker-hub-username/my-react-app-image:latest

Your Docker image should now be available on Docker Hub.

Conclusion

In this article, we learned how to Dockerize a React app using a simple example. We created a Dockerfile, built a Docker image, and ran a Docker container. We also tested the Dockerized app and published the Docker image to Docker Hub. Dockerizing a React app can help streamline the development process and make it easier to share the app with other developers. With this knowledge, you can start Dockerizing your own React apps and take advantage of the many benefits that containerization offers.