/
mountServer.js
105 lines (90 loc) · 2.78 KB
/
mountServer.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
101
102
103
104
105
import Loadable from 'react-loadable'
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import createRender from 'found/lib/createRender'
import express from 'express'
import queryMiddleware from 'farce/lib/queryMiddleware'
import serialize from 'serialize-javascript'
import stats from '../../../public/assets/react-loadable.json'
import { RelayRouterProvider } from './RelayRouterProvider'
import { Resolver } from 'found-relay'
import { getBundles } from 'react-loadable/webpack'
import { getFarceResult } from 'found/lib/server'
import { createRelayEnvironment } from './relayEnvironment'
export function mountServer(routeConfig) {
const app = express()
app.get('/*', async (req, res) => {
try {
const environment = createRelayEnvironment()
const historyMiddlewares = [queryMiddleware]
const resolver = new Resolver(environment)
const render = createRender({})
const { redirect, status, element } = await getFarceResult({
url: req.url,
historyMiddlewares,
routeConfig,
resolver,
render,
})
if (redirect) {
res.redirect(302, redirect.url)
return
}
// Async modules
const modules = []
const getApp = () => (
<RelayRouterProvider
provide={{
environment,
resolver,
routeConfig,
}}
>
{element}
</RelayRouterProvider>
)
ReactDOMServer.renderToString(
<Loadable.Capture
report={moduleName => {
modules.push(moduleName)
}}
>
{getApp()}
</Loadable.Capture>
)
const relayData = await environment.relaySSRMiddleware.getCache()
setTimeout(() => {
const html = ReactDOMServer.renderToString(getApp())
res.status(status).send(`
<html>
<head>
<title>Isomorphic Found Relay App</title>
</head>
<body>
<div id="react-root">${html}</div>
<script>
window.__RELAY_BOOTSTRAP__ = ${serialize(
JSON.stringify(relayData),
{
isJSON: true,
}
)};
</script>
<script src="/assets/manifest.bundle.js"></script>
<script src="/assets/artworks.js"></script>
${getBundles(stats, modules)
.filter(bundle => bundle.file.endsWith('.js'))
.map(bundle => {
return `<script src="/assets/${bundle.file}"></script>`
})
.join('\n')}
</body>
</html>
`)
}, 0)
} catch (error) {
console.log(error) // eslint-disable-line
}
})
return app
}