Giter Club home page Giter Club logo

hapi-vue's Introduction

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

hapi-vue's People

Contributors

belar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

hapi-vue's Issues

You have a startup video tutorial with hapi-vue

I tried to install the project and run app but vue-router did not work for me.

I'm a newcomer looking forward to having specific instructions. Or pre-built templates so that it can work.

We hope to help me . I love hapi-vue

Thank you !

npm run dev error

Hey I'm playing around with the project. After I npm install and then npm run dev I get the following error, have you run into before?

ERROR in ./client/main.js
Module build failed: TypeError: fileSystem.statSync is not a function
    at module.exports (/Users/slokas/dev/vuetest/app2/jupiter/node_modules/babel-loader/lib/utils/exists.js:7:25)
    at find (/Users/slokas/dev/vuetest/app2/jupiter/node_modules/babel-loader/lib/resolve-rc.js:13:9)
    at Object.module.exports (/Users/slokas/dev/vuetest/app2/jupiter/node_modules/babel-loader/lib/index.js:113:132)
 @ multi main

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.