CODEWITHSUNDEEP
dockervue.js
jemz
jemz

Reputation: 5123

Hot reload in Vue does not work inside a Docker container

I was trying to dockerize my existing simple vue app , following on this tutorial from vue webpage https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html. I successfully created the image and the container. My problem is that when I edit my code like "hello world" in App.vue it will not automatically update or what they called this hot reload ? or should I migrate to the latest Vue so that it will work ?

docker run -it --name=mynicevue -p 8080:8080 mynicevue/app

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
# RUN npm run build

EXPOSE 8080
CMD [ "http-server", "serve" ]

EDIT:

Still no luck. I comment out the npm run build. I set up also vue.config.js and add this code

  module.exports = {
    devServer: {
        watchOptions: {
            ignored: /node_modules/,
            aggregateTimeout: 300,
            poll: 1000,
        },
    }
};

then I run the container like this `docker run -it --name=mynicevue -v %cd%:/app -p 8080:8080 mynicevue/app

when the app launches to browser I get this error in terminal and the browser is whitescreen

"GET /" Error (404): "Not found"

Can someone help me please of my Dockerfile what is wrong or missing so that I can play my vue app using docker ?

Thank you in advance.

Upvotes: 2

Views: 5631

Answers (2)

Neo Mn
Neo Mn

Reputation: 587

if you tried previous answers and still doesn't work , try adding watch:{usePolling: true} to vite.config.js file

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: true,
    port: 4173,
    watch: {
      usePolling: true
    }
  }
})

Upvotes: 2

Eranga Heshan
Eranga Heshan

Reputation: 5804

Okay I tried your project in my local and here's how you do it.

Dockerfile

FROM node:lts-alpine

# bind your app to the gateway IP
ENV HOST=0.0.0.0

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

EXPOSE 8080

ENTRYPOINT [ "npm", "run", "dev" ]

Use this command to run the docker image after you build it:

docker run -v ${PWD}/src:/app/src -p 8080:8080 -d mynicevue/app

Explanation

  1. It seems that Vue is expecting your app to be bound to your gateway IP when it is served from within a container. Hence ENV HOST=0.0.0.0 inside the Dockerfile.

  2. You need to mount your src directory to the running container's /app/src directory so that the changes in your local filesystem directly reflects and visible in the container itself.

  3. The way in Vue to watch for the file changes is using npm run dev, hence ENTRYPOINT [ "npm", "run", "dev" ] in Dockerfile

Upvotes: 5

Related Questions