How to Dockerize a React App
Tags: webdev, docker, devops, softwaredevelopment
Published: 2024-06-10 14:54:39

In my previous blog, I discussed about essential docker commands that every developer should know, Please refer [Essential Docker commands](https://dev.to/hemanthreddyb/essential-docker-commands-every-developer-should-know-kni)

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](https://nodejs.org/en).
2. **Docker**: Download and install Docker from [Docker's official website](https://www.docker.com/).

## 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!