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 "[email protected]"


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

> [email protected] 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]

I have also created an issue at github.com/cameronhimself/vue-drag-drop-demo/issues/6 — Wolfgang Fahl
– Wolfgang Fahl, Commented Sep 19, 2018 at 8:42

Adiii · Accepted Answer · 2018-09-19 10:20:50Z

2

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

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'

answered Sep 19, 2018 at 10:20

Adiii

61.1k10 gold badges180 silver badges174 bronze badges

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

Comments

Wolfgang Fahl · Accepted Answer · 2018-09-19 12:36:49Z

2

Running the build version in nginx also works:

# WF 2018-09-18
FROM ubuntu:18.04

MAINTAINER Wolfgang Fahl "[email protected]"


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;"]

answered Sep 19, 2018 at 12:36

Wolfgang Fahl

15.7k11 gold badges101 silver badges204 bronze badges

1 Comment

Adiii Over a year ago

Just for improvement, use alpine image which is most light weight image just 2.5mb and with node js it's size 25mb approx

Wolfgang Fahl · Accepted Answer · 2018-09-19 13:38:15Z

1

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

answered Sep 19, 2018 at 13:38

Wolfgang Fahl

15.7k11 gold badges101 silver badges204 bronze badges

Comments

reneclavijo · Accepted Answer · 2019-12-10 15:21:57Z

0

I use this docker file

FROM alpine
RUN apk add --update nodejs npm
RUN node -v
RUN npm install -g vue-cli
COPY package.json package-lock.json /usr/src/
WORKDIR /usr/src
RUN npm install
RUN npm audit fix
EXPOSE 8080
CMD npm rebuild node-sass && npm run dev

and my package.json is like this

"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --port 8080 --host 0.0.0.0", 
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },

after build, I run the command

docker run --rm --name <container_name> -p 8080:8080 -v %CD%:/usr/src <image_name>

answered Dec 10, 2019 at 15:21

reneclavijo

112 bronze badges

Collectives™ on Stack Overflow

vuejs drag and drop example in docker not working

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related