Vue + Hapi (API) setup running Gulp + BrowserSync + Nodemon + Webpack HMR, with independent hot reload and restart + ESLint + Unit Testing (Karma, Mocha, Chai, Sinon, Lab)
JavaScript Vue HTML
Clone or download
Latest commit 6ab1232 Mar 17, 2018
Permalink
Failed to load latest commit information.
template Update eslint packages Mar 17, 2018
README.md Update readme, add note about Hapi upgrade Dec 16, 2017
meta.js Add headless Chromium Mar 17, 2018

README.md

Hapi Vue

Development setup utilising Vue (Webpack HMR + Vue loader) and Hapi (Nodemon) running with Gulp and BrowserSync. It includes CSS extraction (build only), linting (ESlint) and unit testing (Karma, Mocha, Chai, Sinon, Lab).

[Important!] Hapi Vue has been updated to Hapi 17, which introduced major, breaking changes - you can read more in the official GitHub issue. Version of Hapi Vue based on Hapi 16 can be found in the "archive" branch, archive-hapi-16.

Mini-doc

/build/ - Contains files needed for build and hot development
/build/index_dev.html - Template for index.html, it will be used by HMR when developing in memory and during production build
/client/ - Vue.js app source
/config/ - Configuration files
/public/ - Public folder served by Hapi
/server/ - Server side logic
/test/ - Contains test files
/app.js - Production server
/gulpfile.js - Gulp setup file

Usage

This is a project template for vue-cli.

$ npm install -g vue-cli
$ vue init belar/hapi-vue <project_name>
$ cd <project_name>

For tips and guides regarding integration of additional mechanisms (e.g vue-router), visit Hapi Vue wiki.

NOTE: If you decide to run api (Hapi) unit tests using Mocha, remember about proper NODE_ENV (test), which with Lab is being set automatically.

Dev Setup

# install dependencies
npm install

# run unit tests
npm run unit

# run api unit tests
npm run unit-api

# serve with hot reload at localhost:4000 (proxy from localhost:3000)
npm run dev

Hapi Webpack Middleware

Hapi Vue uses Hapi plugin system for integration of Webpack middlewares web-dev-middleware and webpack-hot-middleware.

Plugin accepts following options on registration:
config - Webpack configuration file, ./config/webpack.config.js by default.
devOptions - Options for webpack-dev-middleware, as in the official documentation.
hotOptions - Options for webpack-hot-middleware, as in the official documentation.

Production Setup

# install dependencies
npm install

# build for production with minification
npm run build

# run application at localhost:3000
node app.js

Credits:
Vue
Hapi
Gulp
BrowserSync
Webpack