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 from 'path';
   8 import { App } from '../shared/components/app';
   9 import { IsoData } from '../shared/interfaces';
  10 import { routes } from '../shared/routes';
  11 import IsomorphicCookie from 'isomorphic-cookie';
  12 import { lemmyHttp, setAuth } from '../shared/utils';
  13 import { GetSiteForm, GetSiteResponse } from 'lemmy-js-client';
  14 import process from 'process';
  15 import { Helmet } from 'inferno-helmet';
  16
  17 const server = express();
  18 const port = 1234;
  19
  20 server.use(express.json());
  21 server.use(express.urlencoded({ extended: false }));
  22 server.use('/static', express.static(path.resolve('./dist')));
  23
  24 // server.use(cookieParser());
  25
  26 server.get('/*', async (req, res) => {
  27   const activeRoute = routes.find(route => matchPath(req.url, route)) || {};
  28   const context = {} as any;
  29   let auth: string = IsomorphicCookie.load('jwt', req);
  30
  31   let getSiteForm: GetSiteForm = {};
  32   setAuth(getSiteForm, auth);
  33
  34   let promises: Promise<any>[] = [];
  35
  36   let siteData = lemmyHttp.getSite(getSiteForm);
  37   promises.push(siteData);
  38   if (activeRoute.fetchInitialData) {
  39     promises.push(...activeRoute.fetchInitialData(auth, req.path));
  40   }
  41
  42   let resolver = await Promise.all(promises);
  43   let site: GetSiteResponse = resolver[0];
  44   let routeData = resolver.slice(1, resolver.length);
  45
  46   let acceptLang = req.headers['accept-language'].split(',')[0];
  47   let lang = !!site.my_user
  48     ? site.my_user.lang == 'browser'
  49       ? acceptLang
  50       : 'en'
  51     : acceptLang;
  52
  53   let isoData: IsoData = {
  54     path: req.path,
  55     site,
  56     routeData,
  57     lang,
  58   };
  59
  60   const wrapper = (
  61     <StaticRouter location={req.url} context={isoData}>
  62       <App site={isoData.site} />
  63     </StaticRouter>
  64   );
  65   if (context.url) {
  66     return res.redirect(context.url);
  67   }
  68
  69   const root = renderToString(wrapper);
  70   const helmet = Helmet.renderStatic();
  71
  72   res.send(`
  73            <!DOCTYPE html>
  74            <html ${helmet.htmlAttributes.toString()} lang="en">
  75            <head>
  76            <script>window.isoData = ${serialize(isoData)}</script>
  77
  78            ${helmet.title.toString()}
  79            ${helmet.meta.toString()}
  80            ${helmet.link.toString()}
  81
  82            <!-- Required meta tags -->
  83            <meta name="Description" content="Lemmy">
  84            <meta charset="utf-8">
  85            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  86
  87            <!-- Web app manifest -->
  88            <link rel="manifest" href="/static/assets/manifest.webmanifest">
  89
  90            <!-- Icons -->
  91            <link rel="shortcut icon" type="image/svg+xml" href="/static/assets/icons/favicon.svg" />
  92            <link rel="apple-touch-icon" href="/static/assets/icons/apple-touch-icon.png" />
  93
  94            <!-- Styles -->
  95            <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
  96            <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/litely.min.css" id="default-light" media="(prefers-color-scheme: light)" />
  97            <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/darkly.min.css" id="default-dark" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" />
  98            </head>
  99
 100            <body ${helmet.bodyAttributes.toString()}>
 101              <noscript>
 102                <nav class="navbar fixed-bottom navbar-light bg-light">
 103                 Javascript is disabled. Actions will not work.
 104                </nav>
 105              </noscript>
 106
 107              <div id='root'>${root}</div>
 108              <script src='/static/js/client.js'></script>
 109            </body>
 110          </html>
 111 `);
 112 });
 113 let Server = server.listen(port, () => {
 114   console.log(`http://localhost:${port}`);
 115 });
 116
 117 /**
 118  * Used to restart server by fuseBox
 119  */
 120 export async function shutdown() {
 121   Server.close();
 122   Server = undefined;
 123 }
 124
 125 process.on('SIGINT', () => {
 126   console.info('Interrupted');
 127   process.exit(0);
 128 });