vuejs drag and drop example in docker not working

Question

My goal is to try out the demo code for

https://www.npmjs.com/package/vue-drag-drop

in a docker container.

I am using the following Dockerfile:

# WF 2018-09-18
FROM ubuntu:18.04

MAINTAINER Wolfgang Fahl "[e-mail]"


ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update -qq \
        && apt-get install -y nodejs npm git unzip vim \
        && rm -rf /var/lib/apt/lists/* /var/cache/apt/* 

RUN mkdir /app
WORKDIR /app 

RUN git clone https://github.com/cameronhimself/vue-drag-drop-demo
WORKDIR /app/vue-drag-drop-demo

# application specific node dependencies
RUN npm install

# enable port 8080
EXPOSE 8080
# start the webserver
CMD npm run dev

I build with

docker build -t vuedragdrop/bitplan:latest .

and then i interactively run the image with

docker run -it -p 8080:8080 vuedragdrop/bitplan:latest /bin/bash

in the container I issue the command:

npm run dev

then complains about the browser not being available in a headless environment so i change package.json adding a serve script hat will not call --open

 "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "serve": "cross-env NODE_ENV=development webpack-dev-server --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

when I now try things out with

npm run serve

the command gives me warnings and output I completly do not understand, since this is my first vue.js node.js trial

What should I do to get things running?

Output of npm run serve

> vue-drag-drop-demo@1.0.0 serve /app/vue-drag-drop-demo
> cross-env NODE_ENV=development webpack-dev-server --hot

Project is running at http://localhost:8080/
webpack output is served from /
404s will fallback to /index.html
(node:89) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: f13489ff5ff9cb970798
Version: webpack 2.7.0
Time: 2562ms
                                    Asset       Size  Chunks                    Chunk Names
drag.png?82b9c7a5a3f405032b1db71a25f67021    6.85 kB          [emitted]         
                                 build.js    2.06 MB       0  [emitted]  [big]  main
                               index.html  416 bytes          [emitted]         
chunk    {0} build.js (main) 738 kB [entry] [rendered]
    [1] ./~/vue/dist/vue.esm.js 292 kB {0} [built]
    [2] ./~/vue-loader/lib/component-normalizer.js 2.55 kB {0} [built]
   [18] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [19] ./src/main.js 129 bytes {0} [built]
   [20] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
   [21] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
   [41] ./~/loglevel/lib/loglevel.js 7.86 kB {0} [built]
   [48] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [50] ./~/url/url.js 23.3 kB {0} [built]
   [52] ./src/App.vue 1.74 kB {0} [built]
   [88] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
   [89] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
   [91] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
   [92] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
   [93] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
     + 79 hidden modules

WARNING in ./~/vue-loader/lib/template-compiler?{"id":"data-v-78fe715d","hasScoped":true}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/Scoped.vue
(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.
 @ ./src/Scoped.vue 10:2-192
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/vue-loader/lib/template-compiler?{"id":"data-v-78fe715d","hasScoped":true}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/Scoped.vue
(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.
 @ ./src/Scoped.vue 10:2-192
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 548 kB [entry] [rendered]
        [0] ./~/lodash/lodash.js 540 kB {0} [built]
        [1] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-template/index.ejs 6.92 kB {0} [built]
        [2] (webpack)/buildin/global.js 509 bytes {0} [built]
        [3] (webpack)/buildin/module.js 517 bytes {0} [built]

Answer 1

Running the build version in nginx also works:

# WF 2018-09-18
FROM ubuntu:18.04

MAINTAINER Wolfgang Fahl "[e-mail]"


ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update -qq \
        && apt-get install -y nginx nodejs npm git unzip vim \
        && rm -rf /var/lib/apt/lists/* /var/cache/apt/* 

RUN mkdir /app
WORKDIR /app 

RUN git clone https://github.com/cameronhimself/vue-drag-drop-demo
WORKDIR /app/vue-drag-drop-demo

# application specific node dependencies
RUN npm install

# create the app for distribution via a server
RUN npm run build

# remove default html directory
RUN rm -rf /var/www/html

# replace with symbolic link
RUN ln -s /app/vue-drag-drop-demo /var/www/html

# enable port 8080 and 80
EXPOSE 8080 80 443
# start the webserver
CMD ["nginx", "-g", "daemon off;"]

Answer 2

This would be the node version:

# Offical node.js dockerfile
FROM node:8

RUN mkdir /app
WORKDIR /app

RUN git clone https://github.com/cameronhimself/vue-drag-drop-demo

WORKDIR /app/vue-drag-drop-demo

RUN npm install

RUN sed -i "s/--open/--port 8080 --host 0.0.0.0/" package.json

EXPOSE 8080

CMD npm run dev

With a script to build and run it:

#!/bin/bash
# WF 2018-09-19
# build and run
image=bitplan/dragdropnode:latest
name=bitplan_dragdropdemo
docker build . -t $image 
docker run --rm --name $name -p 8080:8080  $image&
sleep 1
docker exec -it $name /bin/bash

Answer 3

I test it locally its working fine but I did few changes

1. If you check the existing package.json file the command that npm run dev is not designed for docker.

Here is my updated command for docker in headless mode and with host.

`cross-env NODE_ENV=development webpack-dev-server --hot --port 8080 --host 0.0.0.0`

Here is the image with modified package.json

docker run --rm --name abc -it -p 8080:8080 adilm7177/vue-drag-drop-demo ash -c 'npm run dev'