# Server Configuration
The code structure and webpack configuration we've described also require some changes to our Express server code.
we need to create an application with a built
app.js
from the resulting bundle. A path to it can be found using the webpack manifest:// server.js const path = require('path') const manifest = require('./dist/server/ssr-manifest.json') const appPath = path.join(__dirname, './dist', 'server', manifest['app.js']) const createApp = require(appPath).default
1
2
3
4
5
6we have to define correct paths to all the assets:
// server.js server.use( '/img', express.static(path.join(__dirname, './dist/client', 'img')) ) server.use('/js', express.static(path.join(__dirname, './dist/client', 'js'))) server.use( '/css', express.static(path.join(__dirname, './dist/client', 'css')) ) server.use( '/favicon.ico', express.static(path.join(__dirname, './dist/client', 'favicon.ico')) )
1
2
3
4
5
6
7
8
9
10
11
12
13
14we need to replace the
index.html
content with our server-side rendered application content:// server.js const indexTemplate = fs.readFileSync( path.join(__dirname, '/dist/client/index.html'), 'utf-8' ) server.get('*', async (req, res) => { const { app } = createApp() const appContent = await renderToString(app) const html = indexTemplate .toString() .replace('<div id="app">', `<div id="app">${appContent}`) res.setHeader('Content-Type', 'text/html') res.send(html) })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Below you can find a full code for our Express server:
const path = require('path')
const express = require('express')
const fs = require('fs')
const { renderToString } = require('@vue/server-renderer')
const manifest = require('./dist/server/ssr-manifest.json')
const server = express()
const appPath = path.join(__dirname, './dist', 'server', manifest['app.js'])
const createApp = require(appPath).default
server.use('/img', express.static(path.join(__dirname, './dist/client', 'img')))
server.use('/js', express.static(path.join(__dirname, './dist/client', 'js')))
server.use('/css', express.static(path.join(__dirname, './dist/client', 'css')))
server.use(
'/favicon.ico',
express.static(path.join(__dirname, './dist/client', 'favicon.ico'))
)
server.get('*', async (req, res) => {
const { app } = await createApp()
const appContent = await renderToString(app)
fs.readFile(path.join(__dirname, '/dist/client/index.html'), (err, html) => {
if (err) {
throw err
}
html = html
.toString()
.replace('<div id="app">', `<div id="app">${appContent}`)
res.setHeader('Content-Type', 'text/html')
res.send(html)
})
})
console.log('You can navigate to http://localhost:8080')
server.listen(8080)
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
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