How to Dockerize a React App

In my previous blog, I discussed about essential docker commands that every developer should know, Please refer Essential Docker commands

In this blog, we’ll walk through the steps to Dockerize a React application. Dockerizing your app can provide numerous benefits, such as ensuring consistency across environments, simplifying the deployment process, and improving scalability. Let's dive into the process!

Prerequisites

Before we start, make sure you have the following installed:

1. Node.js and npm: You can download and install them from Node.js official website.
2. Docker: Download and install Docker from Docker's official website.

Step 1: Create a React App

If you already have a React app, you can skip this step. Otherwise, let's create a simple React app using create-react-app:

npx create-react-app my-react-app
cd my-react-app

Step 2: Create a Dockerfile

A Dockerfile is a script that contains a series of instructions on how to build a Docker image for your application. Create a file named Dockerfile in the root of your React project with the following content:

Dockerfile

# Use an official Node.js runtime as a parent image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code to the working directory
COPY . .

# Build the React app
RUN npm run build

# Install a simple web server to serve static files
RUN npm install -g serve

# Set the command to run the web server
CMD ["serve", "-s", "build"]

# Expose port 5000 to the outside world
EXPOSE 5000

This Dockerfile performs the following steps:

FROM: Specifies the base image. Here, we use a lightweight Node.js image based on Alpine Linux.

WORKDIR: Sets the working directory inside the container.

COPY package.json ./: Copies package.json and package-lock.json to the working directory.

RUN npm install: Installs the project dependencies.

COPY . .: Copies the entire project to the working directory.

RUN npm run build: Builds the React application.

RUN npm install -g serve: Installs serve, a simple web server for serving static files.

CMD ["serve", "-s", "build"]: Specifies the command to run the web server.

EXPOSE 5000: Exposes port 5000, which serve uses by default.

Step 3: Build the Docker Image

Open a terminal, navigate to your project directory, and run the following command to build the Docker image:

docker build -t my-react-app .

This command builds the Docker image using the Dockerfile in the current directory (.) and tags it as my-react-app.

Step 4: Run the Docker Container

Once the image is built, you can run a container using the following command:

docker run -p 5000:5000 my-react-app

This command maps port 5000 of the container to port 5000 on your local machine, allowing you to access the app in your browser at http://localhost:5000.

Step 5: Verify the Setup

Open your browser and navigate to http://localhost:5000. You should see your React application running!

Conclusion

Congratulations! You have successfully Dockerized your React application. By containerizing your app, you ensure a consistent environment across development, testing, and production, making deployments more predictable and scalable.

To summarize, here’s what we did:

1. Created a React app.
2. Wrote a Dockerfile to define the steps to containerize the app.
3. Built a Docker image from the Dockerfile.
4. Ran a Docker container from the image.
5. Verified that the app is running correctly.

With Docker, you can take advantage of containerization to streamline your development and deployment workflows. Happy coding!