reactjswindowsdockerportvite

Docker publishing port not working in Windows 10

I'm learning docker and facing a problem while publishing port from docker container to the host

I created an image for a dummy React app (using Vite) using the command docker build -t react-app .

Below is the Dockerfile -

FROM node:16.17.0-alpine3.16
RUN addgroup app && adduser -S -G app app
USER app
WORKDIR /app
COPY package*.json  .
RUN npm ci
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

And created a container from the image with the command docker run -d --name my-app -p 3000:5173 react-app

NOTE - Port 5173 is the default port used by Vite

But when I tried to access localhost:3000 from my host machine, it didn't work.

I also tried using the container IP address instead of localhost and didn't work. I used docker exec my-app ifconfig command to get container IP address

Some suggested using the IP address mentioned under C:\Windows\System32\drivers\etc\hosts and that didn't help either.

Could someone please help me with this? Thanks!

Edit:
Here is the output of docker logs command -

Output of docker logs command

Solution

  • As per Vite's official documentation, it requires us to pass in --host argument to specify which IP addresses the server should listen on.

    More details here - https://vitejs.dev/config/server-options.html#server-host

    Updated package.json to fix the problem.

    ...
"scripts": {
   "dev": "vite --host",
   "build": "vite build",
   "preview": "vite preview --host"
},
...