Isomorphic Vue

Isomorphic Vue is an opinionated boilerplate for web development built on top of Node.js, Express and Vue 2, containing modern web development tools such as Webpack 3, Babel 6 and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

Features

• vue 2
• vuex
• vue-router
• vue-server-renderer
• webpack 3
• babel 6
• Support client live reload
• Supports server auto compile and restart
• Support less, sass

How to Install

$ git clone https://github.com/wujjpp/isomorphic-vue.git
$ cd isomorphic-vue
$ npm install

How to Run and Build

Run

$ npm start

Build

$ npm run build

Run in dist

$ npm run start:dist

About CDN

Sometimes, we should host our static files(js,css,image and etc) in CDN, for this case you should change seetings in /cdn_config.js, for example: if our CDN root is http://cache.mycdn.com/, change //cache.YourCDN.com to //cache.mycdn.com

/cdn_settings.js

export default {
  dev: {
    publicPath: '/'
  },

  sit: {
    publicPath: '//sitcache.mycdn.com/'
  },

  uat: {
    publicPath: '//uatcache.mycdn.com/'
  },

  prod: {
    publicPath: '//cache.mycdn.com/'
  }
}

then use the following command for building, after built, upload the /build/public folder to CDN, thats all.

$ npm run build -- prod

NOTE: double dashes are required and there is a blank between -- and prod

Analyse webpack stats

We have integrated tools for analysing bundled file, after run npm run build, try to type the following command in your terminal.

$ npm run analyse:client

$ npm run analyse:server

$ npm run analyse

About Browsersync

Navigate to http://localhost:3001 to open Browsersync control panel

Directory Layout

.
├── /public/                     # Static files which are copied into the /build/public folder
├── /src/                        # The source code of the application
│   ├── /components/             # Top level vue components
│   ├── /core/                   # Core module or utility library
│   ├── /routes/                 # Routes or pages
│   │   ├── /apis/               # Backend apis
│   │   ├── /test/               # Example page
│   │   │   ├── /components      # Page level compoment
│   │   │   ├── /images          # Page level images
│   │   │   ├── component.js     # Vue component js
│   │   │   ├── index.vue        # Vue component template
│   │   │   └── style.scss       # Page level style
│   │   └── /xxxx/               # xxxx page    
│   ├── /service/                # isomorphic api service interface entry
│   ├── /store/                  # vuex store
│   ├── /styles/                 # Global stylesheets
│   ├── /assets-loader.js        # Loader for loading assets.json
│   ├── /client.js               # Client entry
│   ├── /create-app.js           # Create Vue App
│   ├── /create-router.js        # Create Vue Router
│   ├── /router-api.js           # Attach backended api modules
│   └── /server.js               # Express server app
├── /tests/                      # Unit and end-to-end tests
├── /tools/                      # Build automation scripts and utilities
│   ├── /analyse/                # analyse tools for webpack stats
│   ├── /libs/                   # Library for build system
│   ├── /loaders/                # Custom webpack loader
│   ├── /plugins/                # Custom webpack plugin
│   ├── /webpack/                # Webpack config files
│   ├── /build-client.js         # Scripts for build client app
│   ├── /build-server.js         # Scripts for build server app
│   ├── /build.js                # Scripts for build client and server
│   ├── /clean.js                # Cleans up for the output (build) folder
│   ├── /config.js               # Build config file
│   ├── /copy.js                 # Copy package.json, public folder and assets.json
│   ├── /post.config.js          # Configuration for transforming styles with PostCSS
│   ├── /run.js                  # Helper function for running build automation tasks
│   ├── /start.js                # Launches the development web server with "live reload"
│   └── /watch.js                # watch public folder, if changed copy files to dist/public folder
├── cdn-settings.js              # Config CDN for each ENV
├── entry-settings.js            # Configure client entry for built
├── package.json                 # The list of 3rd party libraries and utilities
└── port-settings.js             # Configure front and backend port for development

How to Update

$ git checkout master
$ git pull origin master
$ npm install

Made with ♥ by Wu Jian Ping

Feel free to contact me if you have any problem [email protected]