├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── server
    └── index.js
├── src
    ├── App.vue
    ├── MyCmp.vue
    ├── client.js
    └── server.js
├── ssr-bundle.js
├── ssr.js
└── webpack
    ├── webpack.client.js
    └── webpack.server.js


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # nyc test coverage
18 | .nyc_output
19 | 
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | 
23 | # node-waf configuration
24 | .lock-wscript
25 | 
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 | 
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | 
33 | # Optional npm cache directory
34 | .npm
35 | 
36 | # Optional REPL history
37 | .node_repl_history
38 | 
39 | dist
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Hans Chan
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue2-ssr-example
 2 | 
 3 | Vue 2.0 Server-Side Rendering Example. [Read more](http://csbun.github.io/blog/2016/08/vue-2-0-server-side-rendering/).
 4 | 
 5 | ## Installation
 6 | 
 7 | ```bash
 8 | npm install
 9 | ```
10 | 
11 | ## Development
12 | 
13 | ```bash
14 | npm start
15 | ```
16 | 
17 | Hit [http://127.0.0.1:3000/](http://127.0.0.1:3000/) on your favorite browser.
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ssr",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "watch-c": "webpack --config webpack/webpack.client.js -w",
 8 |     "watch-s": "webpack --config webpack/webpack.server.js -w",
 9 |     "build-c": "webpack --config webpack/webpack.client.js",
10 |     "build-s": "webpack --config webpack/webpack.server.js",
11 |     "build": "npm run build-c && npm run build-s",
12 |     "start": "npm run build && node server/index.js"
13 |   },
14 |   "dependencies": {
15 |     "express": "^4.14.0",
16 |     "vue": "^2.0.0-beta.6",
17 |     "vue-server-renderer": "^2.0.0-beta.6"
18 |   },
19 |   "devDependencies": {
20 |     "babel-core": "^6.11.4",
21 |     "babel-loader": "^6.2.4",
22 |     "babel-preset-es2015": "^6.9.0",
23 |     "css-loader": "^0.23.1",
24 |     "vue-loader": "^9.3.1",
25 |     "webpack": "^1.13.1"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const path = require('path');
 3 | const express = require('express');
 4 | const vueServerRenderer = require('vue-server-renderer');
 5 | 
 6 | const app = express();
 7 | 
 8 | // Server-Side Bundle File
 9 | const serverBundleFilePath = path.join(__dirname, '../dist/bundle.server.js')
10 | const serverBundleFileCode = fs.readFileSync(serverBundleFilePath, 'utf8');
11 | const bundleRenderer = vueServerRenderer.createBundleRenderer(serverBundleFileCode);
12 | 
13 | // Client-Side Bundle File
14 | const clientBundleFilePath = path.join(__dirname, '../dist/bundle.client.js');
15 | const clientBundleFileUrl = '/bundle.client.js';
16 | 
17 | // Server-Side Rendering
18 | app.get('/', function (req, res) {
19 |   bundleRenderer.renderToString((err, html) => {
20 |     if (err){
21 |       res.status(500).send(`
22 |         <h1>Error: ${err.message}</h1>
23 |         <pre>${err.stack}</pre>
24 |       `);
25 |     } else {
26 |       res.send(`
27 |         <!DOCTYPE html>
28 |         <html>
29 |           <head>
30 |             <meta charset="utf-8">
31 |             <title>Vue 2.0 SSR</title>
32 |           </head>
33 |           <body>
34 |             ${html}
35 |             <script src="${clientBundleFileUrl}"></script>
36 |           </body>
37 |         </html>`);
38 |     }
39 |   });
40 | });
41 | 
42 | app.get('/data', function (req, res) {
43 |   function randNum() {
44 |     return Math.round(Math.random() * 100);
45 |   }
46 |   res.send({
47 |     name: `Hans-${randNum()}`,
48 |     age: randNum(),
49 |   });
50 | });
51 | 
52 | // Client-Side Bundle File
53 | app.get(clientBundleFileUrl, function (req, res) {
54 |   const clientBundleFileCode = fs.readFileSync(clientBundleFilePath, 'utf8');
55 |   res.send(clientBundleFileCode);
56 | });
57 | 
58 | // Start server
59 | const PORT = process.env.PORT || 3000;
60 | app.listen(PORT, function () {
61 |   console.log(`Example app listening on port ${PORT}!`);
62 | });
63 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="my-app">
 3 |     <h1>{{name}}</h1>
 4 |     <h2>age: {{age}} <button @click="plus">+1</button></h2>
 5 |     <my-cmp :name="name"></my-cmp>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import MyCmp from './MyCmp.vue';
11 | 
12 | export default {
13 |   components: {
14 |     MyCmp,
15 |   },
16 |   data() {
17 |     return {
18 |       name: 'Hans',
19 |       age: 0,
20 |     }
21 |   },
22 |   created() {
23 |     console.log('created > ' + this.age);
24 |     ++this.age;
25 |   },
26 |   methods: {
27 |     plus() {
28 |       this.age++;
29 |     },
30 |   },
31 | };
32 | </script>
33 | 
34 | <style>
35 | .my-app {
36 |   background: #eee;
37 |   padding: 10px;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/MyCmp.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p>Hello {{ name }}</p>
 4 |     <p>Welcome to China!</p>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: [ 'name' ],
11 |   replace: false,
12 | };
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
1 | // client-entry
2 | import Vue from 'vue';
3 | import App from './App.vue';
4 | 
5 | const VueApp = Vue.extend(App);
6 | const app = new VueApp({
7 |   el: '.my-app',
8 | });
9 | 


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
 1 | // server-entry
 2 | import Vue from 'vue';
 3 | import App from './App.vue';
 4 | const app = new Vue(App);
 5 | 
 6 | // the default export should be a function
 7 | // which will receive the context of the render call
 8 | export default function(context) {
 9 |   return new Promise((resolve, reject) => {
10 |     // app.fetchServerData(context);
11 |     resolve(app);
12 |   });
13 | };
14 | 


--------------------------------------------------------------------------------
/ssr-bundle.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const fs = require('fs');
 3 | const path = require('path');
 4 | const vueServerRenderer = require('vue-server-renderer');
 5 | 
 6 | const filePath = path.join(__dirname, './dist/bundle.server.js')
 7 | const code = fs.readFileSync(filePath, 'utf8');
 8 | // const code = require('../dist/bundle');
 9 | const bundleRenderer = vueServerRenderer.createBundleRenderer(code);
10 | 
11 | 
12 | bundleRenderer.renderToString((err, html) => {
13 |   if (err){
14 |     console.log(err.message);
15 |     console.log(err.stack);
16 |   }
17 |   console.log(html);
18 | });
19 | 


--------------------------------------------------------------------------------
/ssr.js:
--------------------------------------------------------------------------------
 1 | const Vue = require('vue');
 2 | const renderer = require('vue-server-renderer').createRenderer();
 3 | 
 4 | const Cmp = Vue.component('my-cmp', {
 5 |   template: `<p>this is a component</p>`,
 6 | });
 7 | 
 8 | const App = Vue.component('my-app', {
 9 |   components: {
10 |     Cmp,
11 |   },
12 |   template: `
13 |     <div class="server-uptime">
14 |       <h1>{{name}}</h1>
15 |       <h2>age {{age}}</h2>
16 |       <my-cmp></my-cmp>
17 |     </div>
18 |   `
19 | });
20 | 
21 | const vm = new App({
22 |   data: {
23 |     name: 'Hans',
24 |     age: 18,
25 |   }
26 | })
27 | 
28 | renderer.renderToString(vm, (err, html) => {
29 |   if (err){
30 |     console.error(err.message);
31 |     console.error(err.stack);
32 |   }
33 |   console.log(html);
34 | });
35 | 


--------------------------------------------------------------------------------
/webpack/webpack.client.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const projectRoot = path.resolve(__dirname, '..');
 3 | 
 4 | module.exports = {
 5 |   entry: path.join(projectRoot, 'src/client.js'),
 6 |   output: {
 7 |     path: path.join(projectRoot, 'dist'),
 8 |     // publicPath: path.join(projectRoot, 'public'),
 9 |     filename: 'bundle.client.js',
10 |   },
11 |   module: {
12 |     loaders: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue',
16 |       },
17 |       {
18 |         test: /\.js$/,
19 |         loader: 'babel',
20 |         include: projectRoot,
21 |         exclude: /node_modules/,
22 |       },
23 |     ]
24 |   },
25 |   // vue: {
26 |   //   loaders: [
27 |   //     'vue-style-loader',
28 |   //     'css-loader',
29 |   //   ],
30 |   // },
31 | };
32 | 


--------------------------------------------------------------------------------
/webpack/webpack.server.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const projectRoot = path.resolve(__dirname, '..');
 3 | 
 4 | module.exports = {
 5 |   target: 'node', // !different
 6 |   entry: path.join(projectRoot, 'src/server.js'),
 7 |   output: {
 8 |     libraryTarget: 'commonjs2', // !different
 9 |     path: path.join(projectRoot, 'dist'),
10 |     filename: 'bundle.server.js',
11 |   },
12 |   module: {
13 |     loaders: [
14 |       {
15 |         test: /\.vue$/,
16 |         loader: 'vue',
17 |       },
18 |       {
19 |         test: /\.js$/,
20 |         loader: 'babel',
21 |         include: projectRoot,
22 |         exclude: /node_modules/,
23 |       },
24 |     ]
25 |   },
26 | };
27 | 


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