Initial SSR

1 files changed, 48 insertions, 0 deletions

diff --git a/vnext/server/middleware/renderer.js b/vnext/server/middleware/renderer.js
new file mode 100644
index 00000000..8edb5f57
--- /dev/null
+++ b/vnext/server/middleware/renderer.js
@@ -0,0 +1,48 @@
+import ReactDOMServer from 'react-dom/server';
+import cookie from 'cookie';
+
+// import our main App component
+import App from '../../src/App';
+
+import { getLinks } from '../sape';
+import { StaticRouter } from 'react-router-dom';
+
+const path = require('path');
+const fs = require('fs');
+
+const serverRenderer = async (req, res, next) => {
+
+    // point to the html file created by CRA's build tool
+    const filePath = path.resolve(__dirname, '..', '..', 'dist', 'index.html');
+
+    // links
+    const cookies = cookie.parse(req.headers.cookie || '');
+
+    const links = await getLinks(req.originalUrl, cookies['sape_cookie']);
+    console.log(`URL: ${req.originalUrl} LINKS: ${links.join(' ')}`);
+    fs.readFile(filePath, 'utf8', (err, htmlData) => {
+        if (err) {
+            console.error('err', err);
+            return res.status(404).end();
+        }
+
+        const routerContext = {};
+
+        // render the app as a string
+        const html = ReactDOMServer.renderToString(
+            <StaticRouter location={req.baseUrl} context={routerContext}>
+                <App footer={links.join(' ')}/>
+            </StaticRouter>
+        );
+
+        // inject the rendered app into our html and send it
+        return res.send(
+            htmlData.replace(
+                '<div id="app"></div>',
+                `<div id="app">${html}</div>`
+            )
+        );
+    });
+};
+
+export default serverRenderer;