Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hot reload in Vue does not work inside a Docker container

Tags:

docker

vue.js

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.

like image 323
jemz Avatar asked Oct 20 '25 14:10

jemz


1 Answers

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

like image 120
Eranga Heshan Avatar answered Oct 22 '25 03:10

Eranga Heshan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!