
In this guide you will learn how to Dockerize React Vite App for local development using Docker Desktop, Dockerfile, Docker Build and Docker Compose.
Why Dockerize your App
It might feel like an extra step but dockerizing your app helps prevent several invisible problems that might crash your app at any moment during development and feature deployments specially if you have more than one developer in your team.
Docker helps you focus on the code instead of infrastructure. It makes setting up your environment very easy, for example with just one docker command you have your react app, node backend and the database all setup and running for you.
It also helps keep everything consistent across different machines. You might be working on windows and your colleague might be working on a mac but you deploy to Linux servers. Docker takes care of installing everything making sure everything stays the same across different platforms.
How to Dockerize your React App
You have a react app on you local windows machine or mac that is running fine. But now you want to put it in a docker container. For this we need to first create a custom docker image using Dockerfile and Docker build commands.
But, before that you need to install docker desktop if you don’t already have it on your machine.
Once you have Docker running on your machine, browse to the root of your React project and create a file called Dockerfile and copy/paste the following code.
# I am using node:latest in this example but you should probably
# use a lightweight version with a fixed version tag like 25.9.0
# or 25.9.0-alpine3.23
FROM node:latest
# Set you work directory
WORKDIR /app
# Copy the package.json file
COPY ./package*.json ./
# Install dependencies
RUN npm install
# Copy all the project files
COPY . .
# Expose the vite server port
EXPOSE 5173
# Run the dev server
CMD ["npm", "run", "dev"]What does it mean
FROM tells Docker which image to use as base image in order to create your custom image.
WORKDIR sets your default directory for the image. This is the directory from where all the commands that follow for example RUN, COPY, CMD etc are executed. If this directory doesn’t exits docker will create it for you.
RUN is used to execute specific commands. In our case we are copying over the package.json file and running 'npm install' to install the dependencies.
COPY is used to copy files from project directory to the WORKDIR inside the image. Use'COPY . .' to copy everything from your project directory to WORKDIR. But in our case we are only going to copy the package.json file.
EXPOSE is used to open the container’s ports to the parent machine. It means the container is listening on this port and we can communicate with it via this port, but you will need to map this port to your local machine port when creating a container in order to access the app server inside the container.
CMD is executed after you create a container with image created from the Dockerfile. In our case it’s starting up the vite’s dev server with the 'npm run dev' command.
Create custom image with Docker Build
Now you can build your custom image using this Dokcerfile. Go to the root of the project where the Dockerfile is and open your favorite terminal tool like git bash or you can also use the terminal on Docker Desktop you installed earlier, just make sure to cd into the correct folder.
Docker Ignore file
Before you build the image, make sure to create a .dockerignore file in the root of the project to avoid copying some files and folders you don’t want copied over during the build process like the nodes_modules folder. It works just like .gitignore file.
It will make your image small and avoid conflicts between windows modules folder and container module folder. Copy the following and any other files or folder you don’t want to copy over to the image.
node_modules
dist
.git
Dockerfile
docker-compose.ymlNow, use the following command to build you custom image.
docker build -t custom-image-name .'custom-app-name' is the name of the image you want to set. Docker will now download the base image, copy package.json, run 'npm install' and then copy all the files from the project folder to the /app folder in the new custom image.
Now run this command to see your image in the list of images
docker imagesCreate container
Now you can create your first container using this image, use the following command.
docker run -d -p 5173:5173 -v .:/app -v /app/node_modules --name container-name custom-image-nameWhat does it mean
'docker run' command is used to create the container.
-d means to run the container in detached mode which it will start the container in background.
-p binds the local port the container port - localPort:containerPort. You can use any available local port you like.
-v is used to bind the local project directory to the one in the container so if any change is made in the code locally it is synced into the container.
--name sets the container name.
If everything went smoothly you should see a long string as output. That is your new container’s ID.
Docker Compose
Instead of remembering and writing a long docker run command every time you want to create a new container, you can write a docker-compose file and use a very small docker compose command to create, start and stop the container.
Create a new file called docker-compose.yml in the root of your project with the following code.
services:
web:
build: .
image: custom-image-name
ports:
- "5173:5173"
volumes:
- .:/app
- /app/node_modulesDocker Compose commands
Up command
Now use the following command in the terminal to build the image from the Dockerfile and create a container using that image with your App running inside it.
docker compose upIf the custom image from docker file and the container is not already built, it will built the image, create a new container and start the container showing the logs in terminal.
Next time you run this command it will check if the custom image and container already exit, it will start the container skipping the build process.
Detached mode
In order to run the container in detached mode (running in the background) add -d at the end of the command.
docker compose up -dStop command
docker compose stopThis will stop the container but keep the container. In order to start the container you use 'docker compose up' command and it will start the container.
Down Command
docker compose downThis will stop and delete all the containers and networks
Other common Docker Compose commands
docker compose psShows the status of all the container in the project
docker compose logs -fShows the logs
Test the new container
Your new container should now be built and running. Run the following command to see it listed under the list of running containers.
docker psTo test if your app is running browse to http://localhost:5173/ and It should serve your app.
Feel free to ask me in comments if you have any questions or see any issues.