DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workkloads.

Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Mastering React App Configuration With Webpack
  • Choosing the Right Framework for Your Project
  • Top React Libraries for Data-Driven Dashboard App Development
  • React.JS: The Best Technology for Application Development

Trending

  • Enhancing Security With ZTNA in Hybrid and Multi-Cloud Deployments
  • Fixing Common Oracle Database Problems
  • Understanding and Mitigating IP Spoofing Attacks
  • Performance Optimization Techniques for Snowflake on AWS
  1. DZone
  2. Software Design and Architecture
  3. Containers
  4. How to Dockerize a React App With Vite: Step-By-Step Guide

How to Dockerize a React App With Vite: Step-By-Step Guide

Dockerize a React application with Vite: learn to configure Vite for Docker, create the Dockerfile and Docker Compose file, and build/run the Docker Container.

By 
Prathap Reddy M user avatar
Prathap Reddy M
·
Aug. 28, 24 · Tutorial
Likes (3)
Comment
Save
Tweet
Share
13.4K Views

Join the DZone community and get the full member experience.

Join For Free

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. 

JavaScript
 
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: Create 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.

Dockerfile
 
# 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:

YAML
 
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: 

Shell
 
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 run it in a Docker container. This setup ensures that our application is portable and can be easily deployed in any environment.

Video

JavaScript app application Docker (software) React (JavaScript library)

Published at DZone with permission of Prathap Reddy M. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Mastering React App Configuration With Webpack
  • Choosing the Right Framework for Your Project
  • Top React Libraries for Data-Driven Dashboard App Development
  • React.JS: The Best Technology for Application Development

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!