import App from './App' import React from 'react' import { StaticRouter } from 'react-router-dom' import express from 'express' import cookieParser from 'cookie-parser' import { renderToString } from 'react-dom/server' import { ServerPersistors, SSRKeycloakProvider } from '@react-keycloak/razzle' import { getKeycloakConfig } from './utils' const assets = require(process.env.RAZZLE_ASSETS_MANIFEST) const server = express() server .disable('x-powered-by') .use(express.static(process.env.RAZZLE_PUBLIC_DIR)) .use(cookieParser()) // 1. Add cookieParser Express middleware .get('/*', (req, res) => { const context = {} // 2. Create an instance of ServerPersistors.ExpressCookies passing the current request const cookiePersistor = ServerPersistors.ExpressCookies(req) // 3. Wrap the App inside SSRKeycloakProvider const markup = renderToString( <SSRKeycloakProvider keycloakConfig={getKeycloakConfig()} persistor={cookiePersistor} > <StaticRouter context={context} location={req.url}> <App /> </StaticRouter> </SSRKeycloakProvider> ) if (context.url) { res.redirect(context.url) } else { res.status(200).send( `<!doctype html> <html lang=""> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="utf-8" /> <title>Welcome to Razzle</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script>window.env = ${JSON.stringify(getKeycloakConfig())}</script> ${ assets.client.css ? `<link rel="stylesheet" href="${assets.client.css}">` : '' } ${ process.env.NODE_ENV === 'production' ? `<script src="${assets.client.js}" defer></script>` : `<script src="${assets.client.js}" defer crossorigin></script>` } </head> <body> <div id="root">${markup}</div> </body> </html>` ) } }) export default server