How to start a Vue.js + webpack dev stack (webpack is no mandatory ;))

README.md

How to start a Vue.js + webpack dev stack

TL;DR

docker-compose build
docker-compose run www vue init webpack .
docker-compose run www npm install
docker-compose up

Requirements

You should have docker-engine and docker-compose installed on your computer and of course, an Internet connection

Setup

After creating a folder which will received all your files, you just have to add this 2 files:

• Dockerfile
• docker-compose.yml

That's all!

Container build

When you are in your folder, just type

docker-compose build

Generate the Vue.js project

After that, just run the vue-cli to bootstrap your project

docker-compose run www vue init webpack .

notes

• www: is my service name in the docker-compose.yml
• .: is the folder where I want to bootstrap my Vue.js application

You will have some prompts to fill, I don't think you need my help to do that ;)

Just ignore the commands suggested

One step before the big jump

Last command to insure everything is ok

docker-compose run www npm install

Start your engine! Get set! Go!!!

docker-compose up

Enjoy!!!

note: you can access to your project via the url provided and yes, the live-reload works ;)

docker-compose.yml

version: '2'

services:
  www:
    build: .
    command: npm run dev
    volumes:
      - .:/app
    ports:
      - "8080:8080"

Dockerfile

FROM node:7.4-alpine

RUN  mkdir /app
WORKDIR /app
ADD . /app/

RUN npm install

EXPOSE 8080

I need to enter the container docker-compose run www bash and install vue-cli inside there. And it: docker-compose run www vue init webpack ., just worked if I run inside the container too.