Containerizing a React App with Docker

Containerization became one of the recent trends in software development technology, because of its advantages with deployment and scalability and it is not for the first time I am writing about dockerizing an app. No doubt, Docker practically is the only platform for containerization, and it provides developers a convenient method to bundle applications and their prerequisites into efficient containers. It also guarantees uniformity across very different environments.

In this post, I will explore the steps involved in containerizing a React application using Docker, starting from the creation of a fundamental React component and concluding with its execution within a Docker container.

Let’s create the react app. Traditionally we use Create React App, but I strongly recommend using vite. I am going to write another blog post about this topic in the future.

First, ensure you have Node.js installed on your machine. Then, run the following commands in your terminal to create a React app using Vite:

npm create vite@latest react-docker-test -- --template react
cd react-docker-test
npm install
npm run dev

Now, let’s move on to Dockerizing our React app. We will need to create a Dockerfile in the root directory of our project. This file contains instructions for Docker to build an image of our application.

# Use official Node.js image as the base image
FROM node:alpine

# Set working directory in the container
WORKDIR /app

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

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Expose port 3000
EXPOSE 3000

# Command to run the application
CMD ["npm", "start"]

Don’t forget to update vite.config.js in order to expose from port 3000:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    host: true, // This makes the server accessible externally
    port: 3000,
  },
});

Furthermore, make sure that scripts section of your package.json looks like this

  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

Now, it’s time to create our Docker image. Launch your terminal and go to the main folder of your project. Next, run the command provided below:

docker build -t react-docker-test .

This command builds a Docker image tagged as “react-docker-test” based on the instructions in our Dockerfile. Once the image is built successfully, we can run our React app inside a Docker container using the following command:

docker run -d -p 3000:3000 react-docker-test

Here’s what each part of the command does:

docker run: Instructs Docker to run a container.
-d: Detaches the container and runs it in the background.
-p 3000:3000: Maps port 3000 of the host machine to port 3000 of the container, allowing access to the React app.
react-docker-test: Specifies the name of the Docker image to run.

Now, if you navigate to http://localhost:3000 in your web browser, you should see your React app up and running inside a Docker container.

To sum up, when you containerize a React app using Docker, it simplifies the process of deploying your app and guarantees consistency and reliability in various environments. By following the steps given in this tutorial, you can effortlessly containerize your own React applications and take advantage of benefits that come with it.

Suleyman Cabir Ataman, PhD

Sharing on social media: