Vue.js / Webpack / Docker / NginX

Overview

This is slightly modified vue-cli bootstrap project with addition of possibility to create Docker image with nginx that will serve static site.

Such image can then be easily deployed with Dokku, pushed to Heroku etc.

2.5.2
Vue.js is used as main Frontend framework, project was bootstraped using `vue-cli` and using Vue.js version `2.5.2`

3.6.0
We use Webpack to bundle and build everything into static html file that is ready to be served via Docker

We use docker to package static html, js and css files and serve them via Nginx inside of docker. For best performance we use lightweight Alpine linux

Nginx will serve static content from within a docker

Requirements

You should have following sowftare installed on your machine:

Node
Npm
Docker

Docker build for production

Go to the project root and run this command

./docker_build/build.sh

It will do a cleanup, run npm install & build, and finally start nginx server inside Docker on port 8080.

See it in action here

Local, non-docker watcher and builds

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

Backend / API?

This is intended for maximum performance, this is why we use Nginx for serving. If you have node.js/PHP/Java backend, do not run it inside this docker container.

Instead, you should follow best practices and create separate Docker with your backend service, and point this frontend code to it.

For a detailed explanation on how things work, check out the guide and docs for vue-loader.