005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
import express from 'express';
|
|
import * as React from 'react';
|
|
import * as ReactDOMServer from 'react-dom/server';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import { ThemeProvider } from '@mui/material/styles';
|
|
import { CacheProvider } from '@emotion/react';
|
|
import createEmotionServer from '@emotion/server/create-instance';
|
|
import createEmotionCache from './createEmotionCache';
|
|
import App from './App';
|
|
import theme from './theme';
|
|
|
|
function renderFullPage(html, css) {
|
|
return `
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>My page</title>
|
|
<meta name="viewport" content="initial-scale=1, width=device-width" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
|
|
/>
|
|
<meta name="emotion-insertion-point" content="" />
|
|
${css}
|
|
</head>
|
|
<body>
|
|
<script async src="build/bundle.js"></script>
|
|
<div id="root">${html}</div>
|
|
</body>
|
|
</html>
|
|
`;
|
|
}
|
|
|
|
function handleRender(req, res) {
|
|
const cache = createEmotionCache();
|
|
const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache);
|
|
|
|
// Render the component to a string.
|
|
const html = ReactDOMServer.renderToString(
|
|
<CacheProvider value={cache}>
|
|
<ThemeProvider theme={theme}>
|
|
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
|
|
<CssBaseline />
|
|
<App />
|
|
</ThemeProvider>
|
|
</CacheProvider>,
|
|
);
|
|
|
|
// Grab the CSS from emotion
|
|
const emotionChunks = extractCriticalToChunks(html);
|
|
const emotionCss = constructStyleTagsFromChunks(emotionChunks);
|
|
|
|
// Send the rendered page back to the client.
|
|
res.send(renderFullPage(html, emotionCss));
|
|
}
|
|
|
|
const app = express();
|
|
|
|
app.use('/build', express.static('build'));
|
|
|
|
// This is fired every time the server-side receives a request.
|
|
app.use(handleRender);
|
|
|
|
const port = 3000;
|
|
app.listen(port, () => {
|
|
console.log(`Listening on ${port}`);
|
|
});
|