Web: Doceditor: added node app

2022-02-16 12:34:37 +03:00 · 2022-02-16 12:34:37 +03:00 · da51dfdd2e
commit da51dfdd2e
parent 89a3b3443d
3 changed files with 63 additions and 1 deletions
--- a/web/ASC.Web.Editor/src/index.js
+++ b/web/ASC.Web.Editor/src/index.js
@ -1 +1,23 @@
-import("./bootstrap");
+import express from "express";
+import path from "path";
+import template from "./src/server/template";
+import render from "./src/server/render";
+
+const app = express();
+
+app.use(
+  "/products/files/doceditor/static/scripts/",
+  express.static(path.resolve(__dirname, "static/scripts"))
+);
+app.use("/media", express.static(path.resolve(__dirname, "media")));
+
+app.disable("x-powered-by");
+
+app.listen(process.env.PORT || 5013);
+
+app.get("/products/files/doceditor/", async (req, res) => {
+  const { props, content } = await render(req);
+  const response = template("Server Rendered Page", props, content);
+  res.setHeader("Cache-Control", "assets, max-age=604800");
+  res.send(response);
+});
--- a/web/ASC.Web.Editor/src/server/render.js
+++ b/web/ASC.Web.Editor/src/server/render.js
@ -0,0 +1,14 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import App from "../Editor.js";
+import { initDocEditor } from "./helpers/utils";
+
+export default async (req) => {
+  const props = await initDocEditor(req);
+
+  let content = renderToString(<App />);
+
+  // Get a copy of store data to create the same store on client side
+
+  return { app, content };
+};
--- a/web/ASC.Web.Editor/src/server/template.js
+++ b/web/ASC.Web.Editor/src/server/template.js
@ -0,0 +1,26 @@
+export default function template(title, initialState = {}, content = "") {
+  let scripts = ""; // Dynamically ship scripts based on render type
+  if (content) {
+    scripts = `   <script>
+                        window.__STATE__ = ${JSON.stringify(initialState)}
+                    </script>
+                    <script src="/products/files/doceditor/static/scripts/doceditor.client.js"></script>
+                    `;
+  } else {
+    scripts = ` <script src="bundle.js"> </script> `;
+  }
+  let page = `<!DOCTYPE html>
+                  <html lang="en">
+                  <head>
+                    <meta charset="utf-8">
+                    <title> ${title} </title>
+                    <link rel="stylesheet" href="style.css">
+                  </head>
+                  <body>
+                    <div id="root">${content}</div>
+                    ${scripts}
+                  </body>
+                  `;
+
+  return page;
+}