Containerizing a React Vite Application using Docker

Photo by Bernd 📷 Dittrich on Unsplash

In this article we are going to talk about how to containerize React Vite application using Docker.

First, create a folder wherever you like. Inside that folder, open the VS Code terminal to run this command

npm create vite@latest frontend

Then select React and press enter. Then next select JavaScript and press enter. You will see a message to run these three commands

cd frontend
npm install
npm run dev

You can see frontend application running on the default port number on the browser. Stop that using Ctrl + C. Then go inside the frontend folder. Change that file into a simple frontend application like this.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  return(
    <div className="App">
      <div className='card'>
        <h1>Hello Traveler</h1>
        <p>Welcome to sri lanka</p>
      </div>
      </div>
  );
}

export default App;

Now go to the root folder(frontend) and create Dockerfile.

Now insert this content into that Dockerfile

FROM node:20-alpine
WORKDIR /app
COPY package*.json .
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

This Dockerfile creates a containerized environment for a Node.js frontend application. Starting with FROM node:20-alpine, we use a lightweight Linux distribution with Node.js 20 pre-installed. The WORKDIR /appcommand sets our working directory inside the container. Think of it as creating a dedicated folder where all our application files will live. This help keeping them organized and separate from system files.

We strategically copy the package*.json files first and run npm install before copying the actual source code. What could be the reason for this? Comment it below. If you don’t know search it using LLM and comment it.

The COPY . . command brings in our application code, EXPOSE 5173 documents which port our app uses, and CMD ["npm", "run", "dev"] defines the startup command. This layered approach optimizes build times and creates a clean, reproducible development environment.

Now create a .dockerignore file in the root directory. Insert node_modules into the newly created .dockerignore file

Now it’s time to create the image using Dockerfile. You can execute the following command to create Docker image.

docker build -t react-app

You can see the created docker image by using the following command.

docker images

Now let’s create the container.

docker run --name react-container --rm -p 3000:5173 -v /app/node_modules -v ${pwd}:/app -e CHOKIDAR_USEPOLLING=true react-app

• --name react-container assigns a friendly name to the container
• --rm automatically removes the container when it stops (cleanup)
• -p 3000:5173 maps your local port 3000 to the container's port 5173, allowing browser access
• -v /app/node_modules creates an anonymous volume for node_modules, preventing host dependencies from overwriting container ones
• -v ${pwd}:/app bind-mounts your current directory to /app in the container, enabling live code changes
• -e CHOKIDAR_USEPOLLING=true ensures that when you save changes to your code, your browser automatically shows the updates without manually refreshing the page (needed for Docker to work properly)
• react-app is the image name to run

Now you can access the react app using localhost:3000 in your browser. If you do any change to the code file it will automatically update in the container and you can see real time update in the browser.

Feel free to give this article a clap (or many! 😜) if you found it helpful. It motivates me to write more articles. I’d love to hear your feedback on how I can improve my writing. Your suggestions mean a lot to me. Thank you for reading! 😇