Dockerized Vite + Vue frontend won't run locally

Question

I'm trying to use docker-compose to run a FE Vite + Vue project locally. I've referenced several tutorials and posts on this including here. docker-compose runs fine and starts the FE server, but it doesn't load in Chrome. Dockerfile -


FROM node

WORKDIR /app

COPY ./generic-forum/package.json .

RUN npm install

COPY . .

EXPOSE 5173

CMD [ "npm", "run", "dev"]

vite.config.js


import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  server: {
    port: 5173,
    host: true,
    strictPort: true
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

docker-compose:

version: "3.8"
services:
  backend:
    build: ./
    ports:
      - "3001:3001"
    volumes:
      - ./:/app
  frontend:
    build: ../generic-forum-fe/
    ports:
      - "5173:5173"
    volumes:
      - ../generic-forum-fe/generic-forum/src:/app/src

In my package.json, I've edited dev to "dev": "vite --host 0.0.0.0"

score 0 · Accepted Answer · answered Jun 08 '23 at 14:05

0

Somehow it was a problem with my bind mount. Changing it to

volumes:
      - ../generic-forum-fe/generic-forum/:/app

fixed it

answered Jun 08 '23 at 14:05

tris

99
3

Dockerized Vite + Vue frontend won't run locally

1 Answers1