DEV Community

Shaikh Al Amin
Shaikh Al Amin

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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,
    },
  },
});
Enter fullscreen mode Exit fullscreen mode
👋 While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay