src/server/index.tsx

   1 import cookieParser = require('cookie-parser');
   2 import serialize from 'serialize-javascript';
   3 import express from 'express';
   4 import { StaticRouter } from 'inferno-router';
   5 import { renderToString } from 'inferno-server';
   6 import { matchPath } from 'inferno-router';
   7 import path = require('path');
   8 import { App } from '../shared/components/app';
   9 import { routes } from '../shared/routes';
  10 import IsomorphicCookie from 'isomorphic-cookie';
  11 const server = express();
  12 const port = 1234;
  13
  14 server.use(express.json());
  15 server.use(express.urlencoded({ extended: false }));
  16 server.use('/assets', express.static(path.resolve('./dist/assets')));
  17 server.use('/static', express.static(path.resolve('./dist/client')));
  18
  19 server.use(cookieParser());
  20
  21 server.get('/*', (req, res) => {
  22   const activeRoute = routes.find(route => matchPath(req.url, route)) || {};
  23   console.log(activeRoute);
  24   const context = {} as any;
  25   const isoData = {
  26     name: 'fishing sux',
  27   };
  28   let auth: string = IsomorphicCookie.load('jwt', req);
  29
  30   const wrapper = (
  31     <StaticRouter location={req.url} context={context}>
  32       <App />
  33     </StaticRouter>
  34   );
  35   if (context.url) {
  36     return res.redirect(context.url);
  37   }
  38
  39   res.send(`
  40            <!DOCTYPE html>
  41            <html lang="en">
  42            <head>
  43            <script>window.isoData = ${serialize(isoData)}</script>
  44
  45            <!-- Required meta tags -->
  46            <meta name="Description" content="Lemmy">
  47            <meta charset="utf-8">
  48            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  49
  50            <!-- Icons -->
  51            <link rel="shortcut icon" type="image/svg+xml" href="/assets/favicon.svg" />
  52            <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" />
  53
  54            <!-- Styles -->
  55            <link rel="stylesheet" type="text/css" href="/assets/css/tribute.css" />
  56            <link rel="stylesheet" type="text/css" href="/assets/css/toastify.css" />
  57            <link rel="stylesheet" type="text/css" href="/assets/css/choices.min.css" />
  58            <link rel="stylesheet" type="text/css" href="/assets/css/tippy.css" />
  59            <link rel="stylesheet" type="text/css" href="/assets/css/themes/litely.min.css" id="default-light" media="(prefers-color-scheme: light)" />
  60            <link rel="stylesheet" type="text/css" href="/assets/css/themes/darkly.min.css" id="default-dark" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" />
  61            <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
  62
  63            <!-- Scripts -->
  64            <script async src="/assets/libs/sortable/sortable.min.js"></script>
  65            </head>
  66
  67            <body>
  68              <div id='root'>${renderToString(wrapper)}</div>
  69              <script src='./static/bundle.js'></script>
  70            </body>
  71          </html>
  72 `);
  73 });
  74 let Server = server.listen(port, () => {
  75   console.log(`http://localhost:${port}`);
  76 });
  77
  78 /**
  79  * Used to restart server by fuseBox
  80  */
  81 export async function shutdown() {
  82   Server.close();
  83   Server = undefined;
  84 }