web-toggle-point/examples/express/src/routes/config/router.js at 550e7bda776e4ceb39db63569c69544dc26e134f · TomStrepsil/web-toggle-point · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { Router, static as assetsFolder } from "express";
import { renderToPipeableStream } from "react-dom/server";
import App from "./App.js";

const router = new Router();

router.use(assetsFolder("public"));
router.get("/*", (req, res) => {
  const { pipe } = renderToPipeableStream(
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="anonymous"
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap"
          rel="stylesheet"
        />
        <link href="main.css" rel="stylesheet" />
      </head>
      <body>
        <div>
          <App config={JSON.parse(process.env.CONFIG || null)} />
        </div>
        <p>
          (try re-starting server with a different start command / .env file)
        </p>
      </body>
    </html>,
    {
      bootstrapScripts: ["/config/main.js"],
      onShellReady() {
        res.statusCode = 200;
        res.setHeader("Content-type", "text/html");
        pipe(res);
      },
      onShellError() {
        res.statusCode = 500;
        res.send("<!doctype html><p>Loading...</p>");
      }
    }
  );
});

export default router;