cra-ssr/config/run.js at main · correasebastian/cra-ssr · GitHub

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
const lServer = require("@loadable/server")
const moduleWithfault = require('../build/server/bundle')
const path = require("path")
const statsFile = path.resolve('build/server/loadable-stats.json')
// We create an extractor from the statsFile
const extractor = new lServer.ChunkExtractor({ statsFile })
const fs = require('fs');

const express = require('express');

const PORT = 3000;
const helmetExtractorRegex = /<title data-react-helmet="true">(.+)<\/title>/

// const routes = ['/', '/page'];

/**
 * initialize the application and create the routes
 */
const app = express();

const filePath = path.resolve(__dirname, '..', 'build','client', 'index.html');
const mainStatic = path.resolve(__dirname, '../build/client')

const endHeadNode = '</head>'
const all = (req, res)=>{
    fs.readFile(filePath, 'utf8', (err, htmlData) => {
        if (err) {
          console.error('err', err);
          return res.status(404).end(); // WARNING: This 404 will be handled by Express server and won't be your React 404 component.
        }
        const location = req.url;
          /**
           * Set the app's response to 200 OK (https://httpstatuses.com/200)
           */
          res.writeHead(200, { 'Content-Type': 'text/html' })
          console.log(`SSR of ${req.path}`);

        const [reactDom, helmet,sheets ] = moduleWithfault.default(extractor,location )

        const css = sheets.toString();
        const styleTag = `<style id="jss-server-side">${css}</style>`

        const helmetTitle= helmet.title.toString()
        const hasHelmetTitle = helmetTitle ? helmetTitle.match(helmetExtractorRegex): null

        if(hasHelmetTitle){
          htmlData= htmlData
          .replace(
            /\s*<title>(.+)<\/title>\s*/,
            helmetTitle
          )
        }

        return res.end(
          htmlData
          .replace(
            '<html',
            '<html '+ helmet.htmlAttributes.toString()
          )
          .replace(
            '<body',
            '<body '+ helmet.bodyAttributes.toString()
          )
          .replace(
            endHeadNode,
            `${helmet.meta.toString()} ${helmet.link.toString()} ${helmet.style.toString()} ${helmet.script.toString()} ${styleTag}` + endHeadNode
          )
          .replace(
            '<div id="root"></div>',
            `<div id="root">${reactDom}</div>`
          )
        );
      });
}

app.get('/', all);
app.use(express.static(mainStatic))
app.get('/*', all);

/**
 * Set the location of the static assets (ie the js bundle generated by webapck)
 */

app.listen(PORT, () => console.log(`Example app listening on port ${PORT}!`));