prerenderer.tsx

import * as React from 'react';
import { renderToString } from 'react-dom/server';
import createMemoryHistory from 'history/createMemoryHistory';
import { StaticRouter } from 'react-router-dom';
import { Provider as ReduxProvider } from 'react-redux';
import * as serialize from 'serialize-javascript';
import { routerMiddleware } from 'react-router-redux';
import { createStore, applyMiddleware } from 'redux';
import { I18nextProvider } from 'react-i18next';
import thunk from 'redux-thunk';
import rootReducer from 'reducers';

// import { create as createJss } from 'jss';
// import jssPreset from 'jss-preset-default';
import { JssProvider, SheetsRegistry } from 'react-jss';
import createGenerateClassName from '@material-ui/core/styles/createGenerateClassName';
import { MuiThemeProvider } from '@material-ui/core/styles';
import theme from 'ui/theme';

// import checkAuthToken from './checkAuthToken';
import routes from 'ui/routes';
import matchRoutes from 'ui/matchRoutes';
import renderRoutes from 'ui/renderRoutes';
import fetchComponentData from './fetchComponentData';
import detectLocaleFromPath from './detectLocaleFromPath';
import getDir from './detectDirection';
import config from '../config';
import checkAuthToken from './checkAuthToken';
import {configure} from 'actions/applicationConfig';

const prerenderer = (html, errHtml) => (req, res) => {
    console.log('Init prerenderer, request url:', req.url);
    const startTime = Date.now();
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With');
    const store = createStore(rootReducer, {} as any, applyMiddleware(thunk, routerMiddleware(createMemoryHistory)));
    // Only send public data to client
    store.dispatch(configure({ frontendPath: config.frontendPath, apiUrl: config.apiUrl, googleClientId: config.googleClientId }));
    console.log(`Processing request`, req._parsedOriginalUrl);
    const pathname = req._parsedOriginalUrl.pathname;
    const search = req._parsedOriginalUrl.search;
    const context = {};

    function setLocale() {
        const locale = detectLocaleFromPath(config.frontendPath, pathname, 0);
        console.log('Detected locale for SSR is', locale);
        req.i18n.changeLanguage(locale);
    }

    function renderView() {
        // const jss = createJss(jssPreset());
        const sheets = new SheetsRegistry();
        const generateClassName = createGenerateClassName();
        const initialLanguage = req.i18n.language;
        const initialI18nStore = {};
        const defaultLanguage = 'en';
        initialI18nStore[initialLanguage] = req.i18n.services.resourceStore.data[initialLanguage];
        if (initialLanguage !== defaultLanguage) {
          // So that we have missing translations
          initialI18nStore[defaultLanguage] = req.i18n.services.resourceStore.data[defaultLanguage];
        }
        const basename = initialLanguage !== defaultLanguage ? `${config.frontendPath}/${initialLanguage}` : `${config.frontendPath}`;
        const pathWithoutLang = req.url.substr(initialLanguage !== defaultLanguage ? 3 : 0, req.url.length);

        console.log(`<StaticRouter location="${pathWithoutLang}" basename="${basename}"`);

        const InitialView = (
            <ReduxProvider store={ store }>
                <JssProvider generateClassName={ generateClassName } registry={ sheets }>
                    <MuiThemeProvider theme={ theme } sheetsManager={ new Map() }>
                        <I18nextProvider i18n={ req.i18n }>
                            <StaticRouter location={ pathWithoutLang } context={ context } basename={ basename }>
                                { renderRoutes(routes) }
                            </StaticRouter>
                        </I18nextProvider>
                    </MuiThemeProvider>
                </JssProvider>
            </ReduxProvider>
        );

        const componentHTML = renderToString(InitialView);
        const initialState = store.getState();
        const titleState = store.getState().pageTitle.title;

        if (process.env.DEBUG) {
            console.log('serverCSS:', sheets.toString());
            console.log('componentHTML:', componentHTML);
            console.log('initialState:', initialState);
        }

        return html.replace(/SERVER_RENDERED_(CSS|STATE|HTML|TITLE|I18NSTORE|DIR|LANG)/g, (match, x) => {
            console.log(`Injecting ${match}`);
            switch (match) {
              case 'SERVER_RENDERED_CSS': return sheets.toString();
              case 'SERVER_RENDERED_STATE': return serialize(initialState, {isJSON: true});
              case 'SERVER_RENDERED_HTML': return componentHTML;
              case 'SERVER_RENDERED_TITLE': return titleState;
              case 'SERVER_RENDERED_I18NSTORE': return serialize(initialI18nStore, {isJSON: true});
              case 'SERVER_RENDERED_DIR': return serialize(getDir(initialLanguage), {isJSON: false});
              case 'SERVER_RENDERED_LANG': return serialize(initialLanguage, {isJSON: false});
              default: console.log(`Unrecognized variable in ssr-template.html: ${match}`); return '';
            }
        });
    }

    setLocale();

    checkAuthToken(req, res, store.dispatch).then(() => {
        const language = req.i18n.language;
        const pathWithoutLang = pathname.substr(language !== 'en' ? 3 : 0, pathname.length);
        console.log(`Rendering ${pathWithoutLang} for ${pathname}`);
        const branch = matchRoutes(routes, pathWithoutLang);

        fetchComponentData(store.dispatch, branch, search)
        .catch((err) => {
            console.log('Error fetching component data', err);
            res.status(500).end(err.message);
            // const errFilledHtml = makeErrorHtml(errHtml, err);
            // res.status(500).set('Content-Type', 'text/html').send(errFilledHtml);
        })
        .then(() => {
            return renderView();
        }).then((html) => {
            const serverRenderTime = `${Date.now() - startTime}ms`;
            console.log('Server render time:', startTime, Date.now(), serverRenderTime);

            const keyStatus = 'status';
            const keyUrl = 'url';
            const status = context[keyStatus];
            const url = context[keyUrl];

            if (status && status === 404) {
                res.status(404);
            }
            if (url) {
                if (url === '/login') {
                    res.status(401);
                } else {
                    res.status(302);
                }
            }

            return res.set('Content-Type', 'text/html').send(html);
        }).catch((err) => {
            console.error('Error:', err);
            res.status(500).end(err.message);
        });
    }).catch((err) => {
      console.error('Error:', err.message);
      const errFilledHtml = makeErrorHtml(errHtml, err);
      res.status(503).set('Content-Type', 'text/html').send(errFilledHtml);
    });
};

const makeErrorHtml = (template, error) => {
  const theFilledHtml = template.replace('ERROR_MESSAGE', error.status).replace('ERROR_DETAILS', error.data);

  return theFilledHtml;
};

export default prerenderer;