nitish24p/Server markup.js

## Server markup.js

/* @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>
  `;
}

	/* @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>
	`;
	}