Vue 2 vite dockerized steps

*Create the Dockerfile like below : *

FROM node:lts-alpine

WORKDIR /usr/src/app

COPY package*.json package-lock.json ./
COPY vite.config.js ./

RUN npm install

COPY . .

EXPOSE 7890
EXPOSE 3010

Now modify the docker-compose like the below:

frontend-service:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: frontend-container
    command: npm run dev
    depends_on:
      - backend-service
    ports:
      - 7890:5173
      - 3010:3010
    volumes:
      - ./frontend:/usr/src/app
      - /usr/src/app/node_modules
    networks:
      - your-network

Now update the vite.config.js file like below:

N:B: For the server config hmr host and port is very important

// https://vitejs.dev/config/

export default defineConfig({
  [.....rest of the config here]
  server: {
    host: true,
    hmr: {
      host: "0.0.0.0",
      port: 3010,
    },
  },
});