├── .babelrc
├── .gitignore
├── index.js
├── src
    ├── server
    │   ├── public
    │   │   └── favicon.ico
    │   ├── views
    │   │   ├── index.jade
    │   │   └── error.jade
    │   ├── router.js
    │   └── index.js
    └── client
    │   ├── components
    │       └── Hello.vue
    │   ├── index.js
    │   └── App.vue
├── nodemon.json
├── .eslintrc
├── LICENSE
├── package.json
├── webpack.config.js
└── README.md


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015"],
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | require('babel-register')
2 | 
3 | require('./src/server')
4 | 


--------------------------------------------------------------------------------
/src/server/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/southerncross/vue-express-dev-boilerplate/HEAD/src/server/public/favicon.ico


--------------------------------------------------------------------------------
/src/server/views/index.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html
3 |   head
4 |     title= title
5 |   body
6 |     #app
7 |     script(src='/javascripts/build.js')
8 | 


--------------------------------------------------------------------------------
/src/server/views/error.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html
3 |   head
4 |     title= title
5 |   body
6 |     h1= message
7 |     h2= error.status
8 |     pre #{error.stack}
9 | 


--------------------------------------------------------------------------------
/src/server/router.js:
--------------------------------------------------------------------------------
 1 | import express from 'express'
 2 | 
 3 | const router = express.Router()
 4 | 
 5 | /* GET home page. */
 6 | router.get('/', function(req, res, next) {
 7 |   res.render('index', { title: 'Express' })
 8 | })
 9 | 
10 | export default router
11 | 


--------------------------------------------------------------------------------
/nodemon.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "verbose": true,
 3 |   "ignore": ["src/server/public/"],
 4 |   "events": {
 5 |     "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'"
 6 |   },
 7 |   "watch": ["src/server/"],
 8 |   "env": {
 9 |     "NODE_ENV": "development"
10 |   },
11 |   "ext": "js jade"
12 | }
13 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "node": true,
 5 |     "es6": true
 6 |   },
 7 |   "parserOptions": {
 8 |     "ecmaVersion": 6,
 9 |     "sourceType": "module",
10 |     "ecmaFeatures": {
11 |       "modules": true
12 |     }
13 |   },
14 |   "extends": "standard",
15 |   "plugins": [
16 |     "html"
17 |   ],
18 |   "rules": {
19 |     "arrow-parens": 0,
20 |     "space-before-function-paren": 0,
21 |     "no-new": 0
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/client/components/Hello.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>{{ msg }}</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data () {
10 |     return {
11 |       // note: changing this line won't causes changes
12 |       // with hot-reload because the reloaded component
13 |       // preserves its current state and we are modifying
14 |       // its initial state.
15 |       msg: 'Hello World!'
16 |     }
17 |   }
18 | }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/src/client/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | import App from './App'
 5 | import Hello from './components/Hello'
 6 | 
 7 | Vue.config.debug = true
 8 | Vue.use(Router)
 9 | 
10 | const router = new Router({
11 |   routes: [
12 |     { name: 'hello', path: '/hello', component: Hello }
13 |   ]
14 | })
15 | 
16 | new Vue({
17 |   el: '#app',
18 |   router,
19 |   render (createElement) {
20 |     return createElement(App)
21 |   }
22 | })
23 | 


--------------------------------------------------------------------------------
/src/client/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="app full-height">
 3 |     <h1>{{ message }}</h1>
 4 |     <router-link :to="{ name: 'hello' }">Goto Hello</router-link>
 5 |     <router-view></router-view>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   data () {
12 |     return {
13 |       message: 'Express + Vue boilerplate'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | html {
21 |   height: 100%;
22 | }
23 | 
24 | body {
25 |   display: flex;
26 |   align-items: center;
27 |   justify-content: center;
28 |   height: 100%;
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 LiShunyang
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-express-dev-boilerplate",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "nodemon index.js"
 8 |   },
 9 |   "author": "Shunyang Li",
10 |   "license": "MIT",
11 |   "devDependencies": {
12 |     "babel-core": "^6.22.1",
13 |     "babel-loader": "^6.2.10",
14 |     "babel-plugin-transform-runtime": "^6.22.0",
15 |     "babel-preset-es2015": "^6.22.0",
16 |     "babel-register": "^6.22.0",
17 |     "babel-runtime": "^6.22.0",
18 |     "body-parser": "^1.16.0",
19 |     "cookie-parser": "^1.4.3",
20 |     "css-loader": "^0.26.1",
21 |     "eslint": "^3.14.1",
22 |     "eslint-config-standard": "^6.2.1",
23 |     "eslint-friendly-formatter": "^2.0.7",
24 |     "eslint-loader": "^1.6.1",
25 |     "eslint-plugin-html": "^2.0.0",
26 |     "eslint-plugin-promise": "^3.4.0",
27 |     "eslint-plugin-standard": "^2.0.1",
28 |     "express": "^4.14.0",
29 |     "file-loader": "^0.9.0",
30 |     "jade": "^1.11.0",
31 |     "morgan": "^1.7.0",
32 |     "nodemon": "^1.11.0",
33 |     "serve-favicon": "^2.3.2",
34 |     "url-loader": "^0.5.7",
35 |     "vue": "^2.1.10",
36 |     "vue-hot-reload-api": "^2.0.8",
37 |     "vue-html-loader": "^1.2.3",
38 |     "vue-loader": "^10.1.0",
39 |     "vue-router": "^2.2.0",
40 |     "vue-style-loader": "^1.0.0",
41 |     "vue-template-compiler": "^2.1.10",
42 |     "webpack": "^1.14.0",
43 |     "webpack-dev-middleware": "^1.9.0",
44 |     "webpack-hot-middleware": "^2.15.0"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: path.join(__dirname, 'src/client/index.js'),
 6 |   output: {
 7 |     path: path.join(__dirname, 'src/server/public/javascripts/'),
 8 |     publicPath: '/javascripts/',
 9 |     filename: 'build.js'
10 |   },
11 |   resolve: {
12 |     extensions: ['', '.js', '.vue']
13 |   },
14 |   resolveLoader: {
15 |     root: path.join(__dirname, 'node_modules')
16 |   },
17 |   module: {
18 |     preLoaders: [
19 |       {
20 |         test: /\.vue$/,
21 |         loader: 'eslint',
22 |         exclude: /node_modules/
23 |       },
24 |       {
25 |         test: /\.js$/,
26 |         loader: 'eslint',
27 |         exclude: /node_modules/
28 |       }
29 |     ],
30 |     loaders: [
31 |       {
32 |         test: /\.js$/,
33 |         loader: 'babel',
34 |         exclude: /node_modules/,
35 |         query: { presets: ['es2015'] }
36 |       },
37 |       {
38 |         test: /\.vue$/,
39 |         loader: 'vue'
40 |       },
41 |       {
42 |         test: /\.json$/,
43 |         loader: 'json'
44 |       },
45 |       {
46 |         test: /\.(png|jpg|gif|svg)$/,
47 |         loader: 'url',
48 |         query: {
49 |           limit: 10000,
50 |           name: '[name].[ext]?[hash:7]'
51 |         }
52 |       }
53 |     ]
54 |   },
55 |   devtool: 'eval-source-map',
56 |   eslint: {
57 |     formatter: require('eslint-friendly-formatter')
58 |   },
59 |   plugins: [
60 |     new webpack.HotModuleReplacementPlugin()
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Vue + Express boilerplate for development
 2 | =========================================
 3 | 
 4 | ## Keywords
 5 | 
 6 | - Vue
 7 | - Express
 8 | - Nodemon
 9 | - Webpack
10 | - Npm
11 | 
12 | 
13 | ## Structure
14 | 
15 | ```
16 | .
17 | ├── LICENSE
18 | ├── README.md
19 | ├── index.js
20 | ├── nodemon.json
21 | ├── package.json
22 | ├── src
23 | │   ├── client
24 | │   │   ├── App.vue
25 | │   │   ├── components
26 | │   │   │   └── Hello.vue
27 | │   │   └── index.js
28 | │   └── server
29 | │       ├── index.js
30 | │       ├── public
31 | │       │   └── favicon.ico
32 | │       ├── router.js
33 | │       └── views
34 | │           ├── error.jade
35 | │           └── index.jade
36 | └── webpack.config.js
37 | ```
38 | 
39 | ## Usage
40 | 
41 | 1. Install dependencies
42 | 
43 |    `npm install`
44 | 
45 | 2. Run the application
46 | 
47 |    `npm run dev`
48 | 
49 | ## References
50 | 
51 | Some ideas are stolen from them, really appreciated.
52 | 
53 | - [Eslint guide](http://eslint.org/docs/user-guide/getting-started)
54 | - [Express generator](http://expressjs.com/en/starter/generator.html)
55 | - [Vue template](https://github.com/vuejs-templates/webpack)
56 | - [Nodemon doc](https://github.com/remy/nodemon#nodemon)
57 | - [Babel register](http://www.ruanyifeng.com/blog/2016/01/babel.html)
58 | - [webpack-dev-middleware-boilerplate](https://github.com/madole/webpack-dev-middleware-boilerplate/tree/master/src)
59 | - [how-can-i-use-webpack-with-express](http://stackoverflow.com/questions/31102035/how-can-i-use-webpack-with-express)
60 | - [The-ultimate-webpack-setup](http://www.christianalfoni.com/articles/2015_04_19_The-ultimate-webpack-setup)
61 | 


--------------------------------------------------------------------------------
/src/server/index.js:
--------------------------------------------------------------------------------
 1 | import express from 'express'
 2 | import path from 'path'
 3 | import favicon from 'serve-favicon'
 4 | import logger from 'morgan'
 5 | import cookieParser from 'cookie-parser'
 6 | import bodyParser from 'body-parser'
 7 | import webpack from 'webpack'
 8 | import webpackDevMiddleware from 'webpack-dev-middleware'
 9 | import webpackHotMiddleware from 'webpack-hot-middleware'
10 | 
11 | import router from './router'
12 | import config from '../../webpack.config'
13 | 
14 | const app = express()
15 | 
16 | // view engine setup
17 | app.set('views', path.join(__dirname, 'views'))
18 | app.set('view engine', 'jade')
19 | 
20 | // uncomment after placing your favicon in /public
21 | app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))
22 | app.use(logger('dev'))
23 | app.use(bodyParser.json())
24 | app.use(bodyParser.urlencoded({ extended: false }))
25 | app.use(cookieParser())
26 | app.use(express.static(path.join(__dirname, 'public')))
27 | 
28 | const compiler = webpack(config)
29 | 
30 | app.use(webpackDevMiddleware(compiler, {
31 |   publicPath: config.output.publicPath,
32 |   stats: { colors: true }
33 | }))
34 | 
35 | app.use(webpackHotMiddleware(compiler))
36 | 
37 | app.use('/', router)
38 | 
39 | // catch 404 and forward to error handler
40 | app.use(function(req, res, next) {
41 |   var err = new Error('Not Found')
42 |   err.status = 404
43 |   next(err)
44 | })
45 | 
46 | // error handler
47 | // will print stacktrace
48 | app.use(function(err, req, res, next) {
49 |   res.status(err.status || 500)
50 |   res.render('error', {
51 |     message: err.message,
52 |     error: err
53 |   })
54 | })
55 | 
56 | app.listen(4000)
57 | 
58 | export default app
59 | 


--------------------------------------------------------------------------------