src/server/index.tsx

   1 import serialize from 'serialize-javascript';
   2 import express from 'express';
   3 import { StaticRouter } from 'inferno-router';
   4 import { renderToString } from 'inferno-server';
   5 import { matchPath } from 'inferno-router';
   6 import path from 'path';
   7 import { App } from '../shared/components/app';
   8 import { InitialFetchRequest, IsoData } from '../shared/interfaces';
   9 import { routes } from '../shared/routes';
  10 import IsomorphicCookie from 'isomorphic-cookie';
  11 import { GetSite, LemmyHttp } from 'lemmy-js-client';
  12 import process from 'process';
  13 import { Helmet } from 'inferno-helmet';
  14 import { initializeSite } from '../shared/initialize';
  15 import { httpUri } from '../shared/env';
  16 import { IncomingHttpHeaders } from 'http';
  17
  18 const server = express();
  19 const port = 1234;
  20
  21 server.use(express.json());
  22 server.use(express.urlencoded({ extended: false }));
  23 server.use('/static', express.static(path.resolve('./dist')));
  24
  25 // server.use(cookieParser());
  26
  27 server.get('/*', async (req, res) => {
  28   const activeRoute = routes.find(route => matchPath(req.path, route)) || {};
  29   const context = {} as any;
  30   let auth: string = IsomorphicCookie.load('jwt', req);
  31
  32   let getSiteForm: GetSite = { auth };
  33
  34   let promises: Promise<any>[] = [];
  35
  36   let headers = setForwardedHeaders(req.headers);
  37
  38   let initialFetchReq: InitialFetchRequest = {
  39     client: new LemmyHttp(httpUri, headers),
  40     auth,
  41     path: req.path,
  42   };
  43
  44   // Get site data first
  45   let site = await initialFetchReq.client.getSite(getSiteForm);
  46   initializeSite(site);
  47
  48   if (activeRoute.fetchInitialData) {
  49     promises.push(...activeRoute.fetchInitialData(initialFetchReq));
  50   }
  51
  52   let routeData = await Promise.all(promises);
  53
  54   // Redirect to the 404 if there's an API error
  55   if (routeData[0] && routeData[0].error) {
  56     let errCode = routeData[0].error;
  57     return res.redirect(`/404?err=${errCode}`);
  58   }
  59
  60   let acceptLang = req.headers['accept-language']
  61     ? req.headers['accept-language'].split(',')[0]
  62     : 'en';
  63   let lang = !!site.my_user
  64     ? site.my_user.lang == 'browser'
  65       ? acceptLang
  66       : 'en'
  67     : acceptLang;
  68
  69   let isoData: IsoData = {
  70     path: req.path,
  71     site_res: site,
  72     routeData,
  73     lang,
  74   };
  75
  76   const wrapper = (
  77     <StaticRouter location={req.url} context={isoData}>
  78       <App siteRes={isoData.site_res} />
  79     </StaticRouter>
  80   );
  81   if (context.url) {
  82     return res.redirect(context.url);
  83   }
  84
  85   const cspHtml = (
  86     <meta
  87       http-equiv="Content-Security-Policy"
  88       content="default-src data:; connect-src * ws: wss:; frame-src *; img-src * data:; script-src 'self'; style-src 'self' 'unsafe-inline'"
  89     />
  90   );
  91
  92   const root = renderToString(wrapper);
  93   const cspStr = process.env.LEMMY_EXTERNAL_HOST ? renderToString(cspHtml) : '';
  94   const helmet = Helmet.renderStatic();
  95
  96   res.send(`
  97            <!DOCTYPE html>
  98            <html ${helmet.htmlAttributes.toString()} lang="en">
  99            <head>
 100            <script>window.isoData = ${serialize(isoData)}</script>
 101
 102            ${helmet.title.toString()}
 103            ${helmet.meta.toString()}
 104
 105            <!-- Required meta tags -->
 106            <meta name="Description" content="Lemmy">
 107            <meta charset="utf-8">
 108            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 109
 110            <!-- Content Security Policy -->
 111            ${cspStr}
 112
 113            <!-- Web app manifest -->
 114            <link rel="manifest" href="/static/assets/manifest.webmanifest">
 115
 116            <!-- Icons -->
 117            <link rel="shortcut icon" type="image/svg+xml" href="/static/assets/icons/favicon.svg" />
 118            <link rel="apple-touch-icon" href="/static/assets/icons/apple-touch-icon.png" />
 119
 120            <!-- Styles -->
 121            <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
 122
 123            <!-- Current theme and more -->
 124            ${helmet.link.toString()}
 125            </head>
 126
 127            <body ${helmet.bodyAttributes.toString()}>
 128              <noscript>
 129                <div class="alert alert-danger rounded-0" role="alert">
 130                  <b>Javascript is disabled. Actions will not work.</b>
 131                </div>
 132              </noscript>
 133
 134              <div id='root'>${root}</div>
 135              <script defer src='/static/js/client.js'></script>
 136            </body>
 137          </html>
 138 `);
 139 });
 140
 141 server.listen(port, () => {
 142   console.log(`http://localhost:${port}`);
 143 });
 144
 145 function setForwardedHeaders(
 146   headers: IncomingHttpHeaders
 147 ): { [key: string]: string } {
 148   let out = {
 149     host: headers.host,
 150   };
 151   if (headers['x-real-ip']) {
 152     out['x-real-ip'] = headers['x-real-ip'];
 153   }
 154   if (headers['x-forwarded-for']) {
 155     out['x-forwarded-for'] = headers['x-forwarded-for'];
 156   }
 157
 158   return out;
 159 }
 160
 161 process.on('SIGINT', () => {
 162   console.info('Interrupted');
 163   process.exit(0);
 164 });