How to dockerize a React Vite project?

[mohameden19961]

How can I use auto-dockerize with a React Vite project and what port will it use?

[ado11231]

Make sure you have Docker Desktop installed and that it is version 2.22 or higher, since that is when Compose Watch was introduced. You can check withdocker compose versionin your terminal.

Update vite.config.js
As covered earlier, this is the first thing you do before touching any Docker file. Set host to 0.0.0.0 and explicitly set the port to 5173. Without this, the container will run but your browser will never reach it.

Write your Dockerfile
This is a development Dockerfile, so its only job is to install dependencies and start the Vite dev server. It does not build for production. The steps inside it are: choose a Node base image, set a working directory, copy package.json in first, run npm install, then copy the rest of your source, and finally run npm run dev as the start command. The reason you copy package.json before the rest of your source is a Docker caching trick. Docker builds in layers and caches each one. If your source code changes but package.json did not, Docker skips the npm install layer entirely and reuses the cached one, making rebuilds much faster.

Write your docker-compose.yml
This file ties everything together. You define one service for your app, point it at your Dockerfile, map port 5173 on your host to port 5173 in the container, and then write the develop.watch block with your three rules.
The rules follow the logic explained earlier. Your src folder uses sync because Vite handles the rest. Your package.json uses rebuild because a new dependency requires reinstalling. Your vite.config.js uses sync+restart because it affects the server at startup but does not need a full image rebuild.

Start it
Run docker compose up --watch in your terminal. Compose builds the image on the first run, starts the container, and then begins monitoring your files. You open your browser at http://localhost:5173.

From this point the workflow is fully automatic. You edit a component, Watch syncs it into the container, Vite picks it up and updates the browser. You add a package to package.json, Watch triggers a rebuild and restarts with the new dependency installed.