Skip to content

Instantly share code, notes, and snippets.

@nitish24p nitish24p/Server markup.js
Last active Apr 15, 2018

Embed
What would you like to do?
Markup for server side render
/* @flow */
import { StaticRouter } from 'react-router-dom';
import { getBundles } from 'react-loadable/webpack';
import App from './../App';
import Loadable from 'react-loadable';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import bundleStats from './../../dist/build/react-loadable.json';
import stats from './../../dist/build/stats.json';
const vendorJsSrc = stats.vendors;
const bundleJsSrc = stats.bundle;
const manifestJsSrc = stats.manifest;
const modules = [];
function fetchModuleName(moduleName: string) {
return modules.push(moduleName);
}
export function renderStaticMarkup(request: Object) {
const context = {};
const markup = ReactDOMServer.renderToString(
<Loadable.Capture report={fetchModuleName}>
<StaticRouter location={request.url} context={context}>
<App />
</StaticRouter>
</Loadable.Capture>
);
const bundles = getBundles(bundleStats, modules);
const bundleScriptTags = bundles.map(bundle => {
return `<script type="text/javascript" src="/js/${bundle.file}"></script>`;
}).join('\n');
return `
<!-- Doctype HTML5 -->
<html lang="en-us">
<head>
</head>
<body>
<div id="root">${markup}</div>
<script type="text/javascript" src="/js/${manifestJsSrc}"></script>
<script type="text/javascript" src="/js/${vendorJsSrc}"></script>
<script type="text/javascript" src="/js/${bundleJsSrc}"></script>
${bundleScriptTags}
<script>window.main();</script>
</body>
</html>
`;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.