From d5cb8f2609d22ffa455025ac93695f36cafddb27 Mon Sep 17 00:00:00 2001
From: Vsevolod Bondar <vsevolod.bondar@sysgears.com>
Date: Fri, 26 Apr 2019 10:24:55 +0300
Subject: [PATCH] Move SSR to separate module

---
 modules/core/server-ts/app.ts                 |  34 +++--
 modules/core/server-ts/middleware/website.tsx | 121 ----------------
 modules/module/server-ts/SSRModule.ts         |  34 +++++
 modules/module/server-ts/ServerModule.ts      |  10 +-
 modules/ssr/server-ts/index.ts                |  31 ++++
 modules/ssr/server-ts/package.json            |   5 +
 modules/ssr/server-ts/react/index.tsx         | 132 ++++++++++++++++++
 modules/ssr/server-ts/react/template.tsx      |  53 +++++++
 packages/server/package.json                  |   1 +
 packages/server/src/modules.ts                |   3 +-
 10 files changed, 287 insertions(+), 137 deletions(-)
 delete mode 100644 modules/core/server-ts/middleware/website.tsx
 create mode 100644 modules/module/server-ts/SSRModule.ts
 create mode 100644 modules/ssr/server-ts/index.ts
 create mode 100644 modules/ssr/server-ts/package.json
 create mode 100644 modules/ssr/server-ts/react/index.tsx
 create mode 100644 modules/ssr/server-ts/react/template.tsx

diff --git a/modules/core/server-ts/app.ts b/modules/core/server-ts/app.ts
index deddb35..2ae8f67 100644
--- a/modules/core/server-ts/app.ts
+++ b/modules/core/server-ts/app.ts
@@ -1,33 +1,47 @@
-import express from 'express';
+import express, { Express } from 'express';
 import path from 'path';
 
 import { isApiExternal } from '@restapp/core-common';
-import ServerModule from '@restapp/module-server-ts';
+import ServerModule, { MiddlewareFunc } from '@restapp/module-server-ts';
 
-import websiteMiddleware from './middleware/website';
 import errorMiddleware from './middleware/error';
 
+type ApplyMiddleware = (middleware: MiddlewareFunc) => void;
+
 export const createServerApp = (modules: ServerModule) => {
-  const app = express();
+  const app: Express = express();
   // Don't rate limit heroku
+
   app.enable('trust proxy');
 
-  if (modules.beforeware) {
-    modules.beforeware.forEach(applyBeforeware => applyBeforeware(app, modules.appContext));
+  const { appContext, beforeware, middleware, ssrMiddleware } = modules;
+
+  const applyMiddleware: ApplyMiddleware = middlewareFunc => middlewareFunc(app, appContext);
+
+  // apply high-priority middlewares
+  if (beforeware) {
+    beforeware.forEach(applyMiddleware);
   }
-  if (modules.middleware) {
-    modules.middleware.forEach(applyMiddleware => applyMiddleware(app, modules.appContext));
+
+  // apply normal-priority middlewares
+  if (middleware) {
+    middleware.forEach(applyMiddleware);
   }
 
   if (__DEV__) {
     app.get('/servdir', (req, res) => res.send(process.cwd() + path.sep));
   }
 
+  // apply REST API controllers
   if (!isApiExternal) {
-    app.get('/api', (req, res, next) => res.json({ message: 'REST API: Success' }));
+    app.get('/api', (req, res) => res.json({ message: 'REST API: Success' }));
+  }
+
+  // apply SSR middleware
+  if (ssrMiddleware) {
+    ssrMiddleware.forEach(applyMiddleware);
   }
 
-  app.use(websiteMiddleware(modules));
   app.use('/', express.static(__FRONTEND_BUILD_DIR__, { maxAge: '180 days' }));
 
   if (__DEV__) {
diff --git a/modules/core/server-ts/middleware/website.tsx b/modules/core/server-ts/middleware/website.tsx
deleted file mode 100644
index f887e81..0000000
--- a/modules/core/server-ts/middleware/website.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { ReactElement } from 'react';
-import ReactDOMServer from 'react-dom/server';
-import { Provider } from 'react-redux';
-import { StaticRouter } from 'react-router';
-import { ServerStyleSheet } from 'styled-components';
-import fs from 'fs';
-import path from 'path';
-import Helmet, { HelmetData } from 'react-helmet';
-import ServerModule from '@restapp/module-server-ts';
-import ClientModule from '@restapp/module-client-react';
-import { createReduxStore } from '@restapp/core-common';
-import { styles } from '@restapp/look-client-react';
-
-let assetMap: { [key: string]: string };
-
-interface HtmlProps {
-  content: string;
-  state: any;
-  css: Array<ReactElement<{}>>;
-  helmet: HelmetData;
-}
-
-let clientModules: ClientModule;
-if (__SSR__) {
-  clientModules = require('../../../../packages/client/src').default;
-  if (module.hot) {
-    module.hot.accept(['../../../../packages/client/src'], () => {
-      clientModules = require('../../../../packages/client/src').default;
-    });
-  }
-}
-
-const Html = ({ content, state, css, helmet }: HtmlProps) => (
-  <html lang="en" {...helmet.htmlAttributes.toComponent()}>
-    <head>
-      {helmet.title.toComponent()}
-      {helmet.meta.toComponent()}
-      {helmet.link.toComponent()}
-      <meta charSet="utf-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-      <link rel="apple-touch-icon" sizes="180x180" href={`${assetMap['apple-touch-icon.png']}`} />
-      <link rel="icon" type="image/png" href={`${assetMap['favicon-32x32.png']}`} sizes="32x32" />
-      <link rel="icon" type="image/png" href={`${assetMap['favicon-16x16.png']}`} sizes="16x16" />
-      <link rel="manifest" href={`${assetMap['manifest.xjson']}`} />
-      <link rel="mask-icon" href={`${assetMap['safari-pinned-tab.svg']}`} color="#5bbad5" />
-      <link rel="shortcut icon" href={`${assetMap['favicon.ico']}`} />
-      <meta name="msapplication-config" content={`${assetMap['browserconfig.xml']}`} />
-      <meta name="theme-color" content="#ffffff" />
-      {!__DEV__ && <link rel="stylesheet" type="text/css" href={`${assetMap['index.css']}`} />}
-      {!!__DEV__ && (
-        <style
-          dangerouslySetInnerHTML={{
-            __html: styles._getCss() + clientModules.stylesInserts.map((style: any) => style._getCss()).join('')
-          }}
-        />
-      )}
-      {!!css && css}
-      {clientModules.scriptsInserts.map((script: string, i: number) => {
-        if (script) {
-          return <script key={i} src={script} />;
-        }
-      })}
-    </head>
-    <body {...helmet.bodyAttributes.toComponent()}>
-      <div id="root" dangerouslySetInnerHTML={{ __html: content || '' }} />
-      {assetMap['vendor.js'] && <script src={`${assetMap['vendor.js']}`} charSet="utf-8" />}
-      <script src={`${assetMap['index.js']}`} charSet="utf-8" />
-    </body>
-  </html>
-);
-
-const renderServerSide = async (req: any, res: any, modules: ServerModule) => {
-  const store = createReduxStore(clientModules.reducers, {});
-  const context: any = {};
-  const App = clientModules.getWrappedRoot(
-    <Provider store={store}>
-      {clientModules.getDataRoot(
-        <StaticRouter location={req.url} context={context}>
-          {clientModules.router}
-        </StaticRouter>
-      )}
-    </Provider>,
-    req
-  );
-
-  context.pageNotFound === true ? res.status(404) : res.status(200);
-
-  if (context.url) {
-    res.writeHead(301, { Location: context.url });
-    res.end();
-  } else {
-    if (__DEV__ || !assetMap) {
-      assetMap = JSON.parse(fs.readFileSync(path.join(__FRONTEND_BUILD_DIR__, 'assets.json')).toString());
-    }
-
-    const sheet = new ServerStyleSheet();
-    const htmlProps: HtmlProps = {
-      content: ReactDOMServer.renderToString(sheet.collectStyles(App)),
-      css: sheet.getStyleElement().map((el, idx) => (el ? React.cloneElement(el, { key: idx }) : el)),
-      helmet: Helmet.renderStatic(), // Avoid memory leak while tracking mounted instances
-      state: {}
-    };
-
-    res.send(`<!doctype html>\n${ReactDOMServer.renderToStaticMarkup(<Html {...htmlProps} />)}`);
-    res.end();
-  }
-};
-
-export default (modules: ServerModule) => async (req: any, res: any, next: (e?: Error) => void) => {
-  try {
-    if (req.path.indexOf('.') < 0 && __SSR__) {
-      return await renderServerSide(req, res, modules);
-    } else if (req.path.indexOf('.') < 0 && !__SSR__ && req.method === 'GET') {
-      res.sendFile(path.resolve(__FRONTEND_BUILD_DIR__, 'index.html'));
-    } else {
-      next();
-    }
-  } catch (e) {
-    next(e);
-  }
-};
diff --git a/modules/module/server-ts/SSRModule.ts b/modules/module/server-ts/SSRModule.ts
new file mode 100644
index 0000000..db5b904
--- /dev/null
+++ b/modules/module/server-ts/SSRModule.ts
@@ -0,0 +1,34 @@
+import { Express } from 'express';
+import CommonModule, { CommonModuleShape } from '@restapp/module-common';
+
+/**
+ * A function which registers new middleware.
+ *
+ * @param app an instance of Express
+ * @param appContext application context
+ */
+type MiddlewareFunc = (app: Express, appContext: { [key: string]: any }) => void;
+
+/**
+ * Server feature modules interface
+ */
+export interface SSRModuleShape extends CommonModuleShape {
+  // A list of functions to register SSR middlewares
+  ssrMiddleware?: MiddlewareFunc[];
+}
+
+interface SSRModule extends SSRModuleShape {}
+
+class SSRModule extends CommonModule {
+  /**
+   * Constructs backend Node feature module representation, that folds all the feature modules
+   * into a single module represented by this instance.
+   *
+   * @param modules feature modules
+   */
+  constructor(...modules: SSRModuleShape[]) {
+    super(...modules);
+  }
+}
+
+export default SSRModule;
diff --git a/modules/module/server-ts/ServerModule.ts b/modules/module/server-ts/ServerModule.ts
index 7aba114..81e78cc 100644
--- a/modules/module/server-ts/ServerModule.ts
+++ b/modules/module/server-ts/ServerModule.ts
@@ -1,8 +1,8 @@
 import { Express } from 'express';
-import CommonModule, { CommonModuleShape } from '@restapp/module-common';
+import SSRModule, { SSRModuleShape } from './SSRModule';
 
 /**
- * Create GraphQL context function params
+ * Create context function params
  */
 interface CreateContextFuncProps {
   // HTTP request
@@ -28,12 +28,12 @@ type CreateContextFunc = (props: CreateContextFuncProps) => { [key: string]: any
  * @param app an instance of Express
  * @param appContext application context
  */
-type MiddlewareFunc = (app: Express, appContext: { [key: string]: any }) => void;
+export type MiddlewareFunc = (app: Express, appContext: { [key: string]: any }) => void;
 
 /**
  * Server feature modules interface
  */
-export interface ServerModuleShape extends CommonModuleShape {
+export interface ServerModuleShape extends SSRModuleShape {
   // A list of functions to create context
   createContextFunc?: CreateContextFunc[];
   // A list of functions to register high-priority middlewares (happens before registering normal priority ones)
@@ -44,7 +44,7 @@ export interface ServerModuleShape extends CommonModuleShape {
 
 interface ServerModule extends ServerModuleShape {}
 
-class ServerModule extends CommonModule {
+class ServerModule extends SSRModule {
   /**
    * Constructs backend Node feature module representation, that folds all the feature modules
    * into a single module represented by this instance.
diff --git a/modules/ssr/server-ts/index.ts b/modules/ssr/server-ts/index.ts
new file mode 100644
index 0000000..082c9fa
--- /dev/null
+++ b/modules/ssr/server-ts/index.ts
@@ -0,0 +1,31 @@
+import { Express } from 'express';
+import path from 'path';
+import { Request, Response } from 'express';
+import reactRenderer from './react';
+import ServerModule, { MiddlewareFunc } from '@restapp/module-server-ts';
+
+const renderServerSide = () => async (req: Request, res: Response, next: (e?: Error) => void) => {
+  const isDocument = req.path.includes('.');
+  const preRender = !isDocument && __SSR__;
+  const serveEntryFile = !isDocument && !__SSR__ && req.method === 'GET';
+
+  try {
+    if (preRender) {
+      return reactRenderer(req, res);
+    } else if (serveEntryFile) {
+      return res.sendFile(path.resolve(__FRONTEND_BUILD_DIR__, 'index.html'));
+    }
+
+    next();
+  } catch (e) {
+    next(e);
+  }
+};
+
+const ssrMiddleware: MiddlewareFunc = (app: Express) => {
+  app.use(renderServerSide());
+};
+
+export default new ServerModule({
+  ssrMiddleware: [ssrMiddleware]
+});
diff --git a/modules/ssr/server-ts/package.json b/modules/ssr/server-ts/package.json
new file mode 100644
index 0000000..adfbaf1
--- /dev/null
+++ b/modules/ssr/server-ts/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "@restapp/ssr-server-ts",
+  "version": "0.1.0",
+  "private": true
+}
diff --git a/modules/ssr/server-ts/react/index.tsx b/modules/ssr/server-ts/react/index.tsx
new file mode 100644
index 0000000..34afa4b
--- /dev/null
+++ b/modules/ssr/server-ts/react/index.tsx
@@ -0,0 +1,132 @@
+import fs from 'fs';
+import path from 'path';
+import { Request, Response } from 'express';
+import React from 'react';
+import Helmet from 'react-helmet';
+import { Provider } from 'react-redux';
+import { StaticRouter } from 'react-router';
+import { ServerStyleSheet } from 'styled-components';
+import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+import ClientModule from '@restapp/module-client-react';
+import { createReduxStore } from '@restapp/core-common';
+import { DocumentProps, Document } from './template';
+
+let assetMap: { [key: string]: string };
+
+let clientModules: ClientModule;
+
+if (__SSR__) {
+  clientModules = require('../../../../packages/client/src').default;
+  if (module.hot) {
+    module.hot.accept(['../../../../packages/client/src'], () => {
+      clientModules = require('../../../../packages/client/src').default;
+    });
+  }
+}
+
+interface CreatedAppContext {
+  url?: any;
+  pageNotFound?: any;
+}
+
+interface CreatedApp {
+  context: CreatedAppContext;
+  store: any;
+  App: any;
+  req: Request;
+  res: Response;
+}
+
+type CreateApp = (req: any, res: any) => Promise<CreatedApp>;
+
+const createApp: CreateApp = async (req, res) => {
+  const { reducers, router } = clientModules;
+  const store = createReduxStore(reducers, {});
+  const context: CreatedAppContext = {};
+
+  const App = clientModules.getWrappedRoot(
+    <Provider store={store}>
+      {clientModules.getDataRoot(
+        <StaticRouter location={req.url} context={context}>
+          {router}
+        </StaticRouter>
+      )}
+    </Provider>,
+    req
+  );
+
+  return {
+    context,
+    store,
+    App,
+    req,
+    res
+  };
+};
+
+type RedirectOnMovedPage = (res: Response, context: CreatedAppContext) => void;
+
+const redirectOnMovedPage: RedirectOnMovedPage = (res, context) => {
+  res.writeHead(301, { Location: context.url });
+  res.end();
+};
+
+const updateAssetMap = () => {
+  if (__DEV__ || !assetMap) {
+    const filePath = path.join(__FRONTEND_BUILD_DIR__, 'assets.json');
+    assetMap = JSON.parse(fs.readFileSync(filePath).toString());
+  }
+};
+
+const mapElementToStyles = (el: any, key: number) => (el ? React.cloneElement(el, { key }) : el);
+
+type GetDocumentProps = (App: any) => DocumentProps;
+
+const getDocumentProps: GetDocumentProps = App => {
+  const sheet = new ServerStyleSheet();
+  const content = renderToString(sheet.collectStyles(App));
+  const css = sheet.getStyleElement().map(mapElementToStyles);
+  const helmet = Helmet.renderStatic();
+
+  return {
+    clientModules,
+    assetMap,
+    content,
+    helmet,
+    css
+  };
+};
+
+type RenderDocument = (documentProps: DocumentProps) => string;
+
+const renderDocument: RenderDocument = documentProps => `
+  <!doctype html>\n${renderToStaticMarkup(<Document {...documentProps} />)}
+`;
+
+type RespondWithDocument = (req: Request, res: Response, App: any) => any;
+
+const respondWithDocument: RespondWithDocument = (req, res, App) => {
+  updateAssetMap();
+
+  if (!res.getHeader('Content-Type')) {
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+  }
+
+  return res.end(req.method === 'HEAD' ? null : renderDocument(getDocumentProps(App)));
+};
+
+type SetStatus = (app: CreatedApp) => Promise<CreatedApp>;
+
+const setStatus: SetStatus = async app => {
+  app.res.status(!!app.context.pageNotFound ? 404 : 200);
+  return app;
+};
+
+type RenderApp = (req: Request, res: Response) => any;
+
+const renderApp: RenderApp = async (req, res) => {
+  const { App, context } = await setStatus(await createApp(req, res));
+  return context.url ? redirectOnMovedPage(res, context) : respondWithDocument(req, res, App);
+};
+
+export default renderApp;
diff --git a/modules/ssr/server-ts/react/template.tsx b/modules/ssr/server-ts/react/template.tsx
new file mode 100644
index 0000000..2ae8dea
--- /dev/null
+++ b/modules/ssr/server-ts/react/template.tsx
@@ -0,0 +1,53 @@
+import React, { ReactElement } from 'react';
+import { HelmetData } from 'react-helmet';
+import ClientModule from '@restapp/module-client-react';
+import { styles } from '@restapp/look-client-react';
+
+export interface DocumentProps {
+  content: string;
+  css: Array<ReactElement<{}>>;
+  helmet: HelmetData;
+  clientModules: ClientModule;
+  assetMap: { [key: string]: string };
+}
+
+const mapStylesToTags = (style: any) => style._getCss();
+const mapScriptsToTags = (script: string, i: number) => script && <script key={i} src={script} />;
+
+export const Document = ({ content, css, helmet, clientModules, assetMap }: DocumentProps) => {
+  return (
+    <html lang="en" {...helmet.htmlAttributes.toComponent()}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+        <meta name="msapplication-config" content={`${assetMap['browserconfig.xml']}`} />
+        <meta name="theme-color" content="#ffffff" />
+        {helmet.title.toComponent()}
+        {helmet.meta.toComponent()}
+        {helmet.link.toComponent()}
+        <link rel="apple-touch-icon" sizes="180x180" href={`${assetMap['apple-touch-icon.png']}`} />
+        <link rel="icon" type="image/png" href={`${assetMap['favicon-32x32.png']}`} sizes="32x32" />
+        <link rel="icon" type="image/png" href={`${assetMap['favicon-16x16.png']}`} sizes="16x16" />
+        <link rel="manifest" href={`${assetMap['manifest.xjson']}`} />
+        <link rel="mask-icon" href={`${assetMap['safari-pinned-tab.svg']}`} color="#5bbad5" />
+        <link rel="shortcut icon" href={`${assetMap['favicon.ico']}`} />
+
+        {!__DEV__ && <link rel="stylesheet" type="text/css" href={`${assetMap['index.css']}`} />}
+        {!!__DEV__ && (
+          <style
+            dangerouslySetInnerHTML={{
+              __html: styles._getCss() + clientModules.stylesInserts.map(mapStylesToTags).join('')
+            }}
+          />
+        )}
+        {!!css && css}
+        {clientModules.scriptsInserts.map(mapScriptsToTags)}
+      </head>
+      <body {...helmet.bodyAttributes.toComponent()}>
+        <div id="root" dangerouslySetInnerHTML={{ __html: content || '' }} />
+        {assetMap['vendor.js'] && <script src={`${assetMap['vendor.js']}`} charSet="utf-8" />}
+        <script src={`${assetMap['index.js']}`} charSet="utf-8" />
+      </body>
+    </html>
+  );
+};
diff --git a/packages/server/package.json b/packages/server/package.json
index 27755cd..7c56ea3 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -55,6 +55,7 @@
     "@restapp/database-server-ts": "^0.1.0",
     "@restapp/testing-server-ts": "^0.1.0",
     "@restapp/welcome-server-ts": "^0.1.0",
+    "@restapp/ssr-server-ts": "^0.1.0",
     "@types/pdfmake": "^0.1.3",
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.18.3",
diff --git a/packages/server/src/modules.ts b/packages/server/src/modules.ts
index 4de5266..c9c80cf 100644
--- a/packages/server/src/modules.ts
+++ b/packages/server/src/modules.ts
@@ -5,9 +5,10 @@ import validation from '@restapp/validation-common-react';
 import cookies from '@restapp/cookies-server-ts';
 import mailer from '@restapp/mailer-server-ts';
 import '@restapp/debug-server-ts';
+import ssr from '@restapp/ssr-server-ts';
 
 import ServerModule from '@restapp/module-server-ts';
 
-const modules: ServerModule = new ServerModule(welcome, cookies, i18n, validation, mailer, core);
+const modules: ServerModule = new ServerModule(welcome, cookies, i18n, validation, mailer, core, ssr);
 
 export default modules;