feat: add production entry & template

2025-06-06 21:03:47 +02:00 · 2018-08-08 00:45:12 +08:00 · 2018-08-08 00:45:12 +08:00 · b079e48976
commit b079e48976
parent 4c36e71d1f
2 changed files with 55 additions and 0 deletions
--- a/lib/core/prodEntry.js
+++ b/lib/core/prodEntry.js
@ -0,0 +1,34 @@
+import React from 'react';
+import {BrowserRouter, StaticRouter} from 'react-router-dom';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
+
+import App from './App';
+import createHtml from './prodTemplate';
+
+// Client side render (e.g: running in browser) to become single-page application (SPA)
+if (typeof document !== 'undefined') {
+  ReactDOM.render(
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>,
+    document.getElementById('app')
+  );
+}
+
+// Renderer for static-site-generator-webpack-plugin (async rendering via callbacks)
+export default function render(locals, callback) {
+  const context = {};
+  const body = ReactDOMServer.renderToString(
+    <StaticRouter location={locals.path} context={context}>
+      <App />
+    </StaticRouter>
+  );
+  const html = createHtml({
+    title: locals.title,
+    body,
+    bundlejs: locals.bundlejs,
+    lang: locals.lang
+  });
+  callback(null, html);
+}
--- a/lib/core/prodTemplate.js
+++ b/lib/core/prodTemplate.js
@ -0,0 +1,21 @@
+/**
+ * Html
+ * This Html.js file acts as a template that we insert all our generated
+ * application code into before sending it to the client as regular HTML.
+ * Note we're returning a template string from this function.
+ */
+
+module.exports = function createHtml({title, body, bundlejs, lang}) {
+  return `
+    <!DOCTYPE html>
+    <html lang="${lang}">
+      <head>
+        <title>${title}</title>
+      </head>
+      <body>
+        <div id="app">${body}</div>
+        <script src="${bundlejs}"></script>
+      </body>
+    </html>
+    `;
+};