Skip to content

Clone And Ready-to-use repo for development using Vue.js Webpack Docker and NginX

Notifications You must be signed in to change notification settings

kodi/vue-webpack-docker-nginx

Repository files navigation

Vue.js / Webpack / Docker / NginX

contributions welcome HitCount

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

IMAGE ALT TEXT 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.

Analytics

About

Clone And Ready-to-use repo for development using Vue.js Webpack Docker and NginX

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published