text: import React from 'react';
  import path from 'path';
  import { renderToString } from 'react-dom/server';
  import { StaticRouter } from 'react-router-dom';
  import { Provider } from 'react-redux';
  import { renderRoutes } from 'react-router-config';
  import serialize from 'serialize-javascript';
  import { ServerStyleSheet } from 'styled-components';
  import { ChunkExtractor } from '@loadable/server';
  import { Helmet } from 'react-helmet';
  import { I18nextProvider } from 'react-i18next';
  import Routes from '../src/app/Routes';
  
  export default (req, store, context, res) => {
    const sheet = new ServerStyleSheet();
  
    // This is the stats file generated by webpack loadable plugin
    const statsFile = path.resolve('public/loadable-stats.json');
  
    // We create an extractor from the statsFile
    const extractor = new ChunkExtractor({ statsFile });
  
    const content = renderToString(
      extractor.collectChunks(
        sheet.collectStyles(
          <I18nextProvider i18n={req.i18n}>
            <Provider store={store}>
              <StaticRouter location={req.url} context={context}>
                {renderRoutes(Routes)}
              </StaticRouter>
            </Provider>
          </I18nextProvider>,
        ),
      ),
    );
  
    // This line must be placed after renderToString method
    // otherwise context won't be populated by App
    const { url } = context;
    if (url) {
      res.redirect(url);
    } else {
      const initialI18nStore = {};
      req.i18n.languages.forEach(l => {
        initialI18nStore[l] = req.i18n.services.resourceStore.data[l];
      });
      const initialLanguage = req.i18n.language;
  
      const helmet = Helmet.renderStatic();
      const styleComponentTags = sheet.getStyleTags(); // or sheet.getStyleElement();
  
      // Wrap your application using "collectChunks"
      // Render your application
      // You can now collect your script tags
      const scriptTags = extractor.getScriptTags(); // or extractor.getScriptElements();
      // You can also collect your "preload/prefetch" links
      const linkTags = extractor.getLinkTags(); // or extractor.getLinkElements();
      // And you can even collect your style tags (if you use "mini-css-extract-plugin")
      const styleTags = extractor.getStyleTags(); // or extractor.getStyleElements();
  
      return `<!DOCTYPE html>
              <head>
                  ${helmet.title.toString()}
                  ${helmet.meta.toString()}
                  ${helmet.link.toString()}
                  ${styleTags}
                  ${styleComponentTags}
                  ${linkTags}
                  <meta charset="utf-8" />
                  <link rel="icon" href="/favicon.ico" />
                  <meta name="viewport" content="width=device-width, initial-scale=1" />
                  <meta name="theme-color" content="#000000" />
                  <meta
                    name="description"
                    content="Web site created using create-react-app"
                  />
                  <link rel="apple-touch-icon" href="/logo192.png" />
                  <link rel="manifest" href="/manifest.json" />
                  <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
                  <title>Pharmacity</title>
                  <script>
                    window.initialI18nStore = JSON.parse('${JSON.stringify(
                      initialI18nStore,
                    )}');
                    window.initialLanguage = '${initialLanguage}';
                  </script>
              </head>
              <body>
                  <div id="root">${content}</div>
                  <script>
                      window.__PRELOADED_STATE__ = ${serialize(
                        store.getState(),
                      ).replace(/</g, '\\u003c')}
                  </script>
                  ${scriptTags}
                  
              </body>
      </html>`;
    }
  };
  