materialuiupgraded
Version:
Material-UI's workspace package
75 lines (62 loc) • 1.97 kB
JavaScript
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { SheetsRegistry } from 'react-jss/lib/jss';
import JssProvider from 'react-jss/lib/JssProvider';
import {
MuiThemeProvider,
createMuiTheme,
createGenerateClassName,
} from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';
import red from '@material-ui/core/colors/red';
import App from './App';
function renderFullPage(html, css) {
return `
<!doctype html>
<html>
<head>
<title>Material-UI</title>
</head>
<body>
<script async src="build/bundle.js"></script>
<div id="root">${html}</div>
<style id="jss-server-side">${css}</style>
</body>
</html>
`;
}
function handleRender(req, res) {
// Create a sheetsRegistry instance.
const sheetsRegistry = new SheetsRegistry();
// Create a sheetsManager instance.
const sheetsManager = new Map();
// Create a theme instance.
const theme = createMuiTheme({
palette: {
primary: green,
accent: red,
type: 'light',
},
});
// Create a new class name generator.
const generateClassName = createGenerateClassName();
// Render the component to a string.
const html = ReactDOMServer.renderToString(
<JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
<MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
<App />
</MuiThemeProvider>
</JssProvider>,
);
// Grab the CSS from our sheetsRegistry.
const css = sheetsRegistry.toString();
// Send the rendered page back to the client.
res.send(renderFullPage(html, css));
}
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);