Dockerize React App

Dockerizing a React app allows you to create a portable and consistent development environment. This guide shows you how to Dockerize a React app and run it in a container.

Create Dockerfile

Inside your React app’s root directory, create a file named Dockerfile:

# Use an official Node.js image as the base
FROM node:18 AS build

# Set working directory
WORKDIR /app

# Copy package.json and install dependencies
COPY package.json package-lock.json ./
RUN npm install --frozen-lockfile

# Copy the rest of the app
COPY . .

# Build the React app
RUN npm run build

# Use a lightweight web server to serve the built files
FROM nginx:1.23

# Remove default Nginx static content and copy the build output
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build /app/build /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

Create .dockerignore file

To avoid copying unnecessary files, create a .dockerignore file:

node_modules
build
.dockerignore
Dockerfile
.git

Build and Run Docker Container

# Build the Docker image
docker build -t my-react-app .

# Run the container
docker run -p 3000:80 my-react-app

Now, your React app should be accessible at http://localhost:3000.

Optional: Use docker-compose

Create a docker-compose.yml file to simplify running your container:

version: '3'
services:
  react-app:
    build: .
    ports:
      - "3000:80"

Then start your container with:

docker-compose up -d

Optimization: Multi-Stage Dockerfile

You can also use multi-stage Dockerfiles to optimize the build process. This can help reduce the size of the final image and improve build performance.

Advice for Optimizing Docker Builds in Frontend & Backend Projects:

When you’re building Docker images whether it’s for a frontend (React on the attached example) or a backend app, always consider using multi-stage builds. They’re key to keeping your image size small and your app performing at its best.

Here’s the difference:

🔑 Pro Tip: Always strive for minimal and optimized Docker images. Smaller images not only improve performance but also enhance security, scalability, and make your deployments much faster. These small optimizations can go a long way in keeping your app reliable and smooth in production. Happy coding!

Optimisation: Use npm ci instead of npm install

When building the Docker image, instead of using npm install to install project dependencies, use npm ci which uses a cached package-lock.json file to speed up the build process.

This approach ensures that only the package definitions are changed, not the entire project.

Optimisation: Use npm run build instead of npm install

The npm run build command is used to build the React app for production. This command runs the react-scripts build script, which creates the optimized production files in the build directory.

Optimization: Use Alpine version of Node.js and Nginx

To optimize the Docker image, you can use Alpine as the base image and Nginx as the web server.

Related Posts