Upgrade SSR

prisma-cms · Jul 25, 2019 · 4577955 · 4577955
1 parent ffeaa54
commit 4577955
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 20 deletions.
diff --git a/src/App.js b/src/App.js
@@ -9,19 +9,15 @@ import {App as PrismaApp} from "@prisma-cms/front";
 
 import Renderer from "./components/Renderer";
 
-import * as queryFragments from "./schema/generated/api.fragments";
-
 export {
   Renderer,
-  queryFragments,
 }
 
 export default class App extends PrismaApp {
 
   static defaultProps = {
     ...PrismaApp.defaultProps,
     Renderer,
-    queryFragments,
     // lang: "ru",
     themeOptions: {
       direction: 'ltr',

diff --git a/src/components/Renderer/index.js b/src/components/Renderer/index.js
@@ -52,12 +52,14 @@ import TemplatePage from "@prisma-cms/front-editor/lib/components/pages/Template
 
 import RootPage from "./pages/Root";
 
+import * as queryFragments from "../../schema/generated/api.fragments";
+
 export default class BoilerplateRenderer extends PrismaCmsRenderer {
 
-  // static defaultProps = {
-  //   ...PrismaCmsRenderer.defaultProps,
-  //   queryFragments,
-  // }
+  static defaultProps = {
+    ...PrismaCmsRenderer.defaultProps,
+    queryFragments,
+  }
 
 
   renderMenu() {
@@ -242,9 +244,9 @@ export default class BoilerplateRenderer extends PrismaCmsRenderer {
       queryFragments,
     } = this.props;
 
-    // console.log("queryFragments", queryFragments);
-
-    // return "Sdfsdf";
+    if(!queryFragments) {
+      return null;
+    }
 
     return <Context.Consumer>
       {context => {

diff --git a/src/index.js b/src/index.js
@@ -8,7 +8,7 @@ import PrismaCms from "@prisma-cms/front";
 import * as serviceWorker from './serviceWorker';
 
 import App, {
-  queryFragments,
+  // queryFragments,
 } from "./App";
 
 import {
@@ -35,9 +35,12 @@ if (node) {
       ${UserNoNestingFragment}
       `,
     }}
-    queryFragments={queryFragments}
+    // queryFragments={queryFragments}
   />, node);
 
+  // If you want your app to work offline and load faster, you can change
+  // unregister() to register() below. Note this comes with some pitfalls.
+  // Learn more about service workers: https://bit.ly/CRA-PWA
   serviceWorker.unregister();
 
 }

diff --git a/src/serviceWorker.js b/src/serviceWorker.js
@@ -8,7 +8,7 @@
 // resources are updated in the background.
 
 // To learn more about the benefits of this model and instructions on how to
-// opt-in, read http://bit.ly/CRA-PWA
+// opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
@@ -43,7 +43,7 @@ export function register(config) {
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit http://bit.ly/CRA-PWA'
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
           );
         });
       } else {
@@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) {
               // content until all client tabs are closed.
               console.log(
                 'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
               );
 
               // Execute callback

diff --git a/src/ssr/SSR/index.js b/src/ssr/SSR/index.js
@@ -547,6 +547,9 @@ class Server {
           // result = result.replace(`<body><div id="root"></div>`, `<body><div id="root">${content}</div>`);
           // result = result.replace(`<body><div id="root"></div>`, `<body><div id="root">${content}</div>${apiSchema}`);
           result = result.replace(`<div id="root"></div>`, `<div id="root">${content || ""}</div>${apolloState || ""}${apiSchema || ""}`);
+          // result = result.replace(`<div id="root"></div>`, `<div id="root">${"content" || ""}</div>${apolloState || ""}${apiSchema || ""}`);
+          // result = result.replace(`<div id="root"></div>`, `<div id="root">${content || ""}</div>${"apolloState" || ""}${apiSchema || ""}`);
+          // result = result.replace(`<div id="root"></div>`, `<div id="root">${content || ""}</div>${"apolloState" || ""}`);
 
           this.timeLog("renderHTML", "replace root content end");
 
@@ -654,7 +657,11 @@ class Server {
 
         });
         // res.end(`<!doctype html>\n${output}`);
+
+        this.timeLog("renderHTML then", "res.end start");
         res.end(output);
+        // res.end("output");
+        this.timeLog("renderHTML then", "res.end end");
 
 
 

diff --git a/src/ssr/index.js b/src/ssr/index.js
@@ -26,6 +26,8 @@ require('@babel/register')({
 
 require('@babel/polyfill');
 
+const fs = require("fs");
+
 let SSRmiddlewareClass = require('./SSR');
 
 let SSRmiddleware = new SSRmiddlewareClass({
@@ -50,17 +52,55 @@ const setupProxy = require("../setupProxy");
 
 setupProxy(app);
 
-app.use('/static', express.static(cwd + '/build/static')); //Serves resources from build folder
-app.use('/build', express.static(cwd + '/build')); //Serves resources from build folder
-app.use('/public', express.static(cwd + '/public')); //Serves resources from public folder
 
 app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
   extended: true
 }));
 app.use(bodyParser.json());       // to support JSON-encoded bodies
 
 
-app.get('**', SSRmiddleware);
+app.get("/static/js/voyager.worker.js", (req, res, next) => {
+  res.sendFile(`${cwd}/node_modules/@prisma-cms/graphql-voyager/dist/voyager.worker.js`);
+});
+
+/**
+ * Process static files
+ */
+app.get("**", (req, res, next) => {
+
+  const {
+    pathname,
+  } = req._parsedUrl;
+
+  if (pathname && pathname !== "/") {
+
+    const path = `${cwd}/build${pathname}`;
+
+    if (fs.existsSync(path)) {
+      // Do something
+      return res.sendFile(path);
+    }
+
+  }
+
+  next();
+});
+
+app.get('**', (req, res, next) => {
+
+  return SSRmiddleware(req, res, next);
+});
+
+// app.get('/', express.static(cwd + '/build')); //Serves resources from build folder
+// app.use('/static', express.static(cwd + '/build/static')); //Serves resources from build folder
+// app.use('/build', express.static(cwd + '/build')); //Serves resources from build folder
+// app.use('/public', express.static(cwd + '/public')); //Serves resources from public folder
+// app.get('/favicon.ico', express.static(cwd + '/build')); //Serves resources from build folder
+// app.get('/manifest.json', express.static(cwd + '/build')); //Serves resources from build folder
+// app.get('/service-worker.js', express.static(cwd + '/build')); //Serves resources from build folder
+
+
+
 
 // get the intended port number, use port 3000 if not provided
 const port = argv.port || process.env.PORT || 3000;