setup demo for SSR

jscottsmith · Feb 26, 2018 · 9c0f178 · 9c0f178
1 parent 7a1d873
commit 9c0f178
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 961 deletions.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -6,7 +6,7 @@
 // When you add this file, we won't add the default configurations which is similar
 // to "React Create App". This only has babel loader to load JavaScript.
 
-const config = require('../webpack.config.js');
+const config = require("../webpack.config.js")[0];
 
 module.exports = {
     plugins: [

diff --git a/demo/client.js b/demo/client.js
@@ -10,4 +10,4 @@ import { App } from 'components';
 
 const root = document.getElementById('root');
 
-ReactDOM.render(<App />, root);
+ReactDOM.hydrate(<App />, root);
diff --git a/demo/components/App/App.scss b/demo/components/App/App.scss
@@ -1,9 +1,9 @@
-// :global {
-//     body {
-//         background-color: #fefefe;
-//         height: 300vh;
-//         font-family: Futura, Helvetica, sans-serif;
-//         font-size: 20px;
-//         color: #222222;
-//     }
-// }
+:global {
+    body {
+        background-color: #fefefe;
+        height: 300vh;
+        font-family: Futura, Helvetica, sans-serif;
+        font-size: 20px;
+        color: #222222;
+    }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css">
 </head>
 <body>
-    <div id="root"></div>
-    <script src="/bundle.js"></script>
+    <div id="root">%%_REACT_%%</div>
+    <script src="/static/bundle.js"></script>
 </body>
 </html>
diff --git a/demo/server.js b/demo/server.js
@@ -0,0 +1,31 @@
+import path from 'path';
+import fs from 'fs';
+import express from 'express';
+
+import React from 'react';
+import ReactServer from 'react-dom/server';
+import { App } from 'components';
+
+import 'babel-polyfill';
+
+const server = express();
+
+const dist = path.resolve(__dirname, '../dist');
+
+server.use('/static', express.static(dist));
+
+server.get('/', (req, res) => {
+    const html = fs
+        .readFileSync(path.resolve(__dirname, './index.html'))
+        .toString();
+
+    const markup = ReactServer.renderToString(<App />);
+
+    const htmlDoc = html.replace('%%_REACT_%%', markup);
+
+    res.send(htmlDoc);
+});
+
+server.listen(3000, () => {
+    console.log('Listening on: http://localhost:3000');
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,4 +10,4 @@ import { App } from 'components';

		const root = document.getElementById('root');

		ReactDOM.render(<App />, root);
		ReactDOM.hydrate(<App />, root);