-
Notifications
You must be signed in to change notification settings - Fork 26
/
server.js
100 lines (85 loc) · 2.51 KB
/
server.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
'use strict'
process.env.VUE_ENV = 'server'
const fs = require('fs')
const path = require('path')
const express = require('express')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
const webpack = require('webpack')
const MFS = require('memory-fs')
const clientWebpackConfig = require('./webpack.client.config')
const serverWebpackConfig = require('./webpack.server.config')
buildClientBundle()
function buildClientBundle () {
// build client bundle
console.log('building client bundle...')
webpack(clientWebpackConfig).run((err, stats) => {
if (err) throw err
if (stats.hasErrors()) {
stats.toJson().errors.forEach(e => {
console.error(e)
})
return
}
buildServerBundle()
})
}
function buildServerBundle () {
// build server bundle
console.log('building server bundle...')
const mfs = new MFS()
const compiler = webpack(serverWebpackConfig)
compiler.outputFileSystem = mfs
compiler.run((err, stats) => {
if (err) throw err
if (stats.hasErrors()) {
stats.toJson().errors.forEach(e => {
console.error(e)
})
return
}
const bundle = mfs.readFileSync(path.resolve(
serverWebpackConfig.output.path,
serverWebpackConfig.output.filename
))
startServer(bundle)
})
}
function startServer (bundle) {
console.log('starting server...')
const app = express()
const renderer = createBundleRenderer(bundle, {
cache: {
max: 10000
}
})
app.use(express.static(path.resolve(__dirname, 'dist')))
app.get('*', (req, res) => {
const start = Date.now()
const context = { url: req.url }
const renderStream = renderer.renderToStream(context)
let firstChunk = true
res.write('<!DOCTYPE html><body>')
renderStream.on('data', chunk => {
if (firstChunk) {
// send down initial store state
if (context.initialState) {
res.write(`<script>window.__INITIAL_STATE__=${JSON.stringify(context.initialState)}</script>`)
}
firstChunk = false
}
res.write(chunk)
})
renderStream.on('end', () => {
console.log('request used: ' + (Date.now() - start) + 'ms')
// end with script to client-bundle
const clientPath = clientWebpackConfig.output.publicPath + clientWebpackConfig.output.filename
res.end(`<script src="${clientPath}"></script></body>`)
})
renderStream.on('error', err => {
throw err
})
})
app.listen(3000, () => {
console.log('ready at localhost:3000')
})
}