[Vuejs]-How to run Vue.js 3 app via docker using TypeScript and Vite?

by

0👍

I’m having the same problem, my goal was to start a simple docker-compose file for development and traefik as my proxy. After several trials and errors, I was able to make it run. Below is my configuration.

here’s the compose setup

services:
  ....
  app:
    image: app
    build:
    context: .
    env_file: ".env"
    volumes:
       - '.:/app'
       - /app/node_modules/ 
    networks:
      - common
    expose:
      - 5173
    labels:
      - "traefik.enable=true"
      - "traefik.http.services.app.loadbalancer.server.port=5173"
      - "traefik.http.routers.app.rule=Host(`example.com`)"

Some explanation:

/app/node_modules/ – ignore node_modules, When using M? processor and the docker container is using linux. (Specifically the "esbuild-darwin-arm64" package is present but this platform
needs the "esbuild-linux-arm64" package instead)

xxx.server.port=5173 – let traefik know what port to use, just added it just in case even though traefik is smart enough to know what port is being expose (not bad to be more specific)

here’s the dockerFile

FROM node:16    
WORKDIR /app
# install vite globally
RUN npm install -g vite
# copy all filtes
COPY . .    
# install all deps
RUN yarn install

# vite default port
EXPOSE 5173    
CMD ["yarn", "run", "dev"]

and finally, you need to configure vite.config.js to expose the host because when I don’t do this I keep getting a bad gateway error.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
  server: {
    host: '0.0.0.0'
  }
});

While in production you can just build yarn build then use nginx to expose the /dist/index.html file

Hope this will be a good help!

Leave a comment