Create ssr fixture

pomber · pomber · Oct 13, 2018 · Oct 13, 2018 · Oct 13, 2018 · Oct 14, 2018
commit 9bfe2ccad98b465bdee6eca7a3282ecf25c62d0a
diff --git a/fixtures/react-ssr/.gitignore b/fixtures/react-ssr/.gitignore
@@ -0,0 +1 @@
+build
diff --git a/fixtures/react-ssr/package.json b/fixtures/react-ssr/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "react-ssr-fixture",
+  "license": "MIT",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "start:prod": "NODE_ENV=production node build/server.js"
+  },
+  "dependencies": {
+    "code-surfer": "^0.5.0",
+    "express": "^4.16.4",
+    "razzle": "^2.4.0",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2"
+  }
+}
diff --git a/fixtures/react-ssr/src/app.js b/fixtures/react-ssr/src/app.js
@@ -0,0 +1,9 @@
+import React from "react";
+import CodeSurfer from "code-surfer";
+const App = () => (
+  <div style={{ height: 100 }}>
+    <CodeSurfer code={`console.log();`} />
+  </div>
+);
+
+export default App;
diff --git a/fixtures/react-ssr/src/client.js b/fixtures/react-ssr/src/client.js
@@ -0,0 +1,9 @@
+import App from "./app";
+import React from "react";
+import { hydrate } from "react-dom";
+
+hydrate(<App />, document.getElementById("root"));
+
+if (module.hot) {
+  module.hot.accept();
+}
diff --git a/fixtures/react-ssr/src/index.js b/fixtures/react-ssr/src/index.js
@@ -0,0 +1,26 @@
+import app from './server';
+import http from 'http';
+
+const server = http.createServer(app);
+
+let currentApp = app;
+
+server.listen(process.env.PORT || 3000, error => {
+  if (error) {
+    console.log(error);
+  }
+
+  console.log('🚀 started');
+});
+
+if (module.hot) {
+  console.log('✅  Server-side HMR Enabled!');
+
+  module.hot.accept('./server', () => {
+    console.log('🔁  HMR Reloading `./server`...');
+    server.removeListener('request', currentApp);
+    const newApp = require('./server').default;
+    server.on('request', newApp);
+    currentApp = newApp;
+  });
+}
diff --git a/fixtures/react-ssr/src/server.js b/fixtures/react-ssr/src/server.js
@@ -0,0 +1,46 @@
+import App from "./app";
+import React from "react";
+import express from "express";
+import { renderToString } from "react-dom/server";
+
+const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+
+const server = express();
+server
+  .disable("x-powered-by")
+  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
+  .get("/*", (req, res) => {
+    const context = {};
+    const markup = renderToString(<App />);
+
+    if (context.url) {
+      res.redirect(context.url);
+    } else {
+      res.status(200).send(
+        `<!doctype html>
+    <html lang="">
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta charset="utf-8" />
+        <title>Welcome to Razzle</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        ${
+          assets.client.css
+            ? `<link rel="stylesheet" href="${assets.client.css}">`
+            : ""
+        }
+        ${
+          process.env.NODE_ENV === "production"
+            ? `<script src="${assets.client.js}" defer></script>`
+            : `<script src="${assets.client.js}" defer crossorigin></script>`
+        }
+    </head>
+    <body>
+        <div id="root">${markup}</div>
+    </body>
+</html>`
+      );
+    }
+  });
+
+export default server;