VueJs docker image not loading in the browser

Question

QUESTION: (edited: solution is added at the end of this post)

I have VueJS project (developed in webpack), which I want to docker-size.

My Dockerfile looks like:

FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD ["npm", "run", "dev"]

which is basically following the flow from this post.

I also have a .dockerignore file, where I copied the same files from my .gitignore and it looks like:

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
.git/

I have created a docker image with the command:

 docker build -t test/my-image-name .

and then run it into a container with the command:

 docker run -it -p 8080:8080 --rm --name my-container-name test/my-image-name

as a result of this last command, I got the same output in the terminal (which is normally showing in cases of debugging with webpack / vuejs) as when I run the app locally:

BUT: at the end, in the browser window the app is not loaded

If I run the commands docker images and docker ps I can see that the image and the container are there, and while creating them, I did not got any error messages.

I found this post and had a few tries for changing the Dockerfile as:

Option 1

FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .    
EXPOSE 8080
ENTRYPOINT ["ng", "serve", "-H", "0.0.0.0"]

Option 2

FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ENTRYPOINT ["ng", "serve", "-H", "0.0.0.0"]
EXPOSE 8080
CMD ["npm", "run", "dev"]

But it seems none of them is working.

btw. my package.json file looks like:

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

So I'm wondering: how to make the app to be opened in the browser from the docker image?

I found the solution and edited the post to contain the answer as well — delux
– delux, Commented Oct 3, 2018 at 12:46
It would be a better idea to post it as an answer and accept it (one of the reasons being Google indexing). — jannis
– jannis, Commented Oct 5, 2018 at 7:44
Thank you! This worked for me. Even when including the EXPOSE 8080 line in the docker file. — Thomas M
– Thomas M, Commented Aug 31, 2020 at 20:55

delux · Accepted Answer · 2020-09-01 10:07:12Z

2

SOLUTION: not, sure if this was the reason for the fix, but I did two things. As mentioned, I'm working with the VueJS and webpack, so inside of the file named config/index.js, which initially looked like:

module.exports = {   
  dev: {    
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

// Various Dev Server settings
host: 'localhost', // <---- this one
port: 8080,

I changed the host property from 'localhost' into '0.0.0.0', removed the EXPOSE 8080 line from the Dockerfile (the initial Docker file from my question above) since I noticed that the port from the config file is used by default and also restarted the installed Docker tool on my local machine.

answered Sep 1, 2020 at 10:07

delux

1,88211 gold badges39 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs docker image not loading in the browser

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related