Playing around with SSR

2017-02-19 23:34:28 +01:00
parent 856befc423
commit 4fd02cc52e
7 changed files with 265 additions and 41 deletions
--- a/tasks/build.js
+++ b/tasks/build.js
@@ -4,17 +4,18 @@ import {
  outputRadar,
 } from './radar';
 import {
-  createStatic,
+  renderApp,
 } from './static';


 (async () => {
  try {
    const radar = await createRadar();
-    outputRadar(radar);
+    renderApp(radar, 'index');
+    // outputRadar(radar);

    // const radarByQuadrants = groupByQuadrants(radar);
-    createStatic(radar);
+    // createStatic(radar);

    console.log('Built radar');
    // console.log(JSON.stringify(radar, null, 2));
--- a/tasks/static.js
+++ b/tasks/static.js
@@ -1,42 +1,78 @@
 import { outputFile } from 'fs-extra';
-import pug from 'pug';
-import frontmatter from 'front-matter';
-import marked from 'marked';
-import {
-  staticPath,
-  distPath,
-  getAllPugFiles,
-} from './file';
-import {
-  vars,
-} from './template';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';

-export const createStatic = async (radar) => {
-  const paths = await getAllPugFiles(staticPath());
-  const fileNames = getPlainFileNames(paths);
-  return renderStaticPages(radar, fileNames);
-  return fileNames;
-};
+import { distPath } from './file';
+import App from '../components/App';

-const getPlainFileNames = (paths) => (
-  paths.map((fileName) => {
-    const [ nameWithSuffix ] = fileName.split('/').slice(-1);
-    return nameWithSuffix.substr(0, nameWithSuffix.length - 4);
-  })
-)
+const appReducer = (state = {}, action) => {
+  return state;
+}

-const renderStaticPages = (radar, fileNames) => (
-  Promise.all(fileNames.map((name) => (
-    new Promise((resolve, reject) => (
-      outputFile(distPath(`${name}.html`), pug.renderFile(staticPath(`${name}.pug`), vars({
-        ...radar,
-      })), (err, data) => {
-        if (err) {
-          reject(err);
-        } else {
-          resolve(data);
-        }
-      })
-    ))
-  )))
+export const renderApp = (radar, pageName) => {
+  // Create a new Redux store instance
+  const store = createStore(appReducer, {
+    ...radar,
+    pageName
+  });
+
+  // Render the component to a string
+  const html = renderToString(
+    <Provider store={store}>
+      <App />
+    </Provider>
+  )
+
+  // Grab the initial state from our Redux store
+  const preloadedState = store.getState()
+
+  // Send the rendered page back to the client
+  const fullHtml = renderFullPage(html, preloadedState);
+
+  // Save file
+  save(fullHtml, pageName);
+}
+
+const renderFullPage = (html, preloadedState) => {
+  return `
+  <html>
+    <head>
+      <title>AOE Technology Radar - AOE Tech Radar</title>
+      <link rel="stylesheet" href="/styles.css"/>
+    </head>
+    <body>
+      <div id="root">${html}</div>
+      <script>
+        window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
+      </script>
+      <script src="/bundle.js"></script>
+    </body>
+  </html>
+
+
+    <!doctype html>
+    <html>
+      <head>
+        <title>Redux Universal Example</title>
+      </head>
+      <body>
+
+        <script src="/static/bundle.js"></script>
+      </body>
+    </html>
+    `
+}
+
+const save = (html, pageName) => (
+  new Promise((resolve, reject) => (
+    outputFile(distPath(`${pageName}.html`), html, (err, data) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(data);
+      }
+    })
+  ))
 );
--- a/tasks/static2.js
+++ b/tasks/static2.js
@@ -0,0 +1,42 @@
+import { outputFile } from 'fs-extra';
+import pug from 'pug';
+import frontmatter from 'front-matter';
+import marked from 'marked';
+import {
+  staticPath,
+  distPath,
+  getAllPugFiles,
+} from './file';
+import {
+  vars,
+} from './template';
+
+export const createStatic = async (radar) => {
+  const paths = await getAllPugFiles(staticPath());
+  const fileNames = getPlainFileNames(paths);
+  return renderStaticPages(radar, fileNames);
+  return fileNames;
+};
+
+const getPlainFileNames = (paths) => (
+  paths.map((fileName) => {
+    const [ nameWithSuffix ] = fileName.split('/').slice(-1);
+    return nameWithSuffix.substr(0, nameWithSuffix.length - 4);
+  })
+)
+
+const renderStaticPages = (radar, fileNames) => (
+  Promise.all(fileNames.map((name) => (
+    new Promise((resolve, reject) => (
+      outputFile(distPath(`${name}.html`), pug.renderFile(staticPath(`${name}.pug`), vars({
+        ...radar,
+      })), (err, data) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(data);
+        }
+      })
+    ))
+  )))
+);