How to Dockerize a React App with Vite | Step-by-Step Guide

In this article, I’ll show you how to Dockerize a React application built with Vite. We’ll go through,

1. Configuring Vite for Docker
2. Creating the Dockerfile
3. Creating the Docker Compose File
4. Building and Running the Docker Container

By the end of this article, you’ll have a portable React app ready to deploy in any environment.

We’ll be working with a React app created using Vite, and I’ll guide you through building a Docker image and running your application in a container step by step.

To follow along with this tutorial, I assume you’re already familiar with the basics of Docker images and containers. We’ll start with a brief explanation of what Docker is and then dive into the hands-on process.

Docker is an open-source platform that packages your application and its dependencies into an isolated environment, known as a container. With just a small set of instructions, you can easily build images and run them as containers, making your applications portable and consistent across different environments.

Step 1: Configuring Vite for Docker

First, we need to configure Vite to work smoothly within a Docker environment. Let’s update the vite.config.js file to ensure it’s compatible.

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

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    watch: {
      usePolling: true,
    },
  },
});

With this configuration, we’re ensuring that the development server listens on the correct port and host, and it uses file system polling to watch for changes when running in a container.

Step 2: Creating the Dockerfile

Before creating the Dockerfile, let me explain what it is. A Dockerfile is a script that Docker uses to build a Docker image. It contains a set of instructions that define how to set up the environment inside a container.

Now, let’s create a Dockerfile in the root directory of our project and add the instructions for building our Docker image.

# Use an official Node runtime as a parent image
FROM node:alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the port the app runs on
EXPOSE 5173

# Command to run the app
CMD ["npm", "run", "dev"]

Step 3: Creating the Docker Compose File

Now, let’s move on to creating a Docker Compose file. But first, what is Docker Compose? Docker Compose is a tool for defining and running multi-container Docker applications.

Let’s create a docker-compose.yml file in the root directory of our project and add the necessary instructions:

version: '3.8'
services:
  web:
    build: .
    ports:
      - "5173:5173"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true

Let’s break down the steps in the docker-compose.yml file for deploying a React Vite project:

version: '3.8': Specifies the version of the Docker Compose file.

services:: Defines a list of services that Docker Compose will manage.

web:: This is the name of our service.

build: .: Tells Docker Compose to build the Docker image using the Dockerfile in the current directory.

ports: "5173:5173": Maps the container’s internal port 5173 to the host machine’s port 5173, allowing you to access the app via http://localhost:5173.

volumes:: Mounts the project directory on your host machine to the /app directory inside the container, allowing for live updates. The second volume ensures that node_modules are not overwritten.

environment:: Sets environment variables inside the container. CHOKIDAR_USEPOLLING=true ensures that the app correctly watches for file changes inside Docker.

Step 4: Building and Running the Docker Container

Now, let’s build the Docker image using the following command:

docker-compose up --build

This command tells Docker Compose to build the Docker image according to the Dockerfile and then start the service. The --build flag forces the image to be rebuilt, even if there are no changes.

Running the Container:

Once the build is complete, Docker Compose will automatically start the container. You can access your application by navigating to http://localhost:5173 in your browser.

Conclusion:

We’ve successfully Dockerized our React Vite project and ran it in a Docker container. This setup ensures that our application is portable and can be easily deployed in any environment.