build react ssr?

DavidWells · DavidWells · commit 407db83216f3 · 2018-07-11T16:32:39.000-07:00
diff --git a/functions/react-app/App.js b/functions/react-app/App.js
@@ -0,0 +1,9 @@
+import React,{Fragment} from "react";
+
+const App = (props) => {
+  return (
+    <div>React!</div>
+  )
+}
+
+export default App;
diff --git a/functions/react-app/usersData.js b/functions/react-app/usersData.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import fetch from 'isomorphic-fetch';
+
+export default function Data() {
+  return fetch('https://jsonplaceholder.typicode.com/users').then(data => data.json())
+}
diff --git a/functions/react-ssr.js b/functions/react-ssr.js
@@ -0,0 +1,45 @@
+import serverless from "serverless-http"
+import express from "express"
+import cors from "cors"
+import bodyParser from "body-parser"
+import React from "react"
+import { renderToString } from "react-dom/server"
+import App from "./react-app/App"
+import Data from "./react-app/usersData"
+import fs from "fs"
+import path from "path"
+
+const app = express()
+
+app.use(cors())
+app.use(bodyParser.json())
+app.use(bodyParser.urlencoded({ extended: false }))
+// app.use(express.static(path.resolve(__dirname, "./Browser")))
+
+
+const markup = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>SSR- React</title>
+<link rel="stylesheet" href="/dev/bundle.css">
+</head>
+<body>
+<div id="root"><!--App--></div>
+
+<script src="/dev/bundle.js"></script>
+</body>
+</html>`
+
+const routerBasePath = (process.env.NODE_ENV === 'dev') ? `/${functionName}` : `/.netlify/functions/${functionName}/`
+
+app.get(routerBasePath, (req, res) => {
+  Data().then(users => {
+    const html = renderToString(<App data={users} />)
+    res.send(markup.replace("<!--App-->", html))
+  })
+})
+
+exports.handler = serverless(app)
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "compression": "^1.7.2",
     "cors": "^2.8.4",
     "express": "^4.16.3",
+    "isomorphic-fetch": "^2.2.1",
     "morgan": "^1.9.0",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
@@ -21,12 +22,15 @@
     "build": "npm-run-all --parallel build:**",
     "build:app": "react-scripts build",
     "build:functions": "netlify-lambda build functions",
+    "postbuild": "npm run react",
+    "react": "cross-env BABEL_ENV=server parcel build functions/react-ssr.js -d functions-build --public-url /functions-build -o react-test.js --no-minify",
     "test": "react-scripts test --env=jsdom"
   },
   "devDependencies": {
     "cross-env": "^5.2.0",
     "netlify-lambda": "^0.4.0",
-    "npm-run-all": "^4.1.3"
+    "npm-run-all": "^4.1.3",
+    "parcel-bundler": "^1.9.4"
   },
   "proxy": {
     "/.netlify/functions": {
