import React, { PropTypes } from 'react';
import { renderToString } from 'react-dom/server';

class HelloMessage extends React.PureComponent {
  static defaultProps = {
    Application: <p>Missing Application :(</p>,
    applicationName: '',
    preloadedState: JSON.stringify({}),
    payload: {},
  }
  static PropTypes = {
    Application: PropTypes.element.isRequired,
    applicationName: PropTypes.string.isRequired,
    preloadedState: PropTypes.string.isRequired,
    payload: PropTypes.object.isRequired,
  }
  render() {
    const { payload, Application, applicationName, preloadedState } = this.props;
    Application.preloadedState = preloadedState;
    return (
      <html lang="en">
        <head>
          <title>{payload.title}</title>
        </head>
        <body>
          <h3>{applicationName}</h3>
          <div id="app-body" dangerouslySetInnerHTML={{ __html: renderToString(<Application />) }} />
          <script dangerouslySetInnerHTML={{ __html: `window.PRELOADED_STATE=${JSON.stringify(preloadedState)};` }} />
          <script src="/static/commons.js" />
          <script src={`/static/${applicationName.toLowerCase()}.js`} />
        </body>
      </html>
    );
  }
}

export default HelloMessage;

import React, { PropTypes } from 'react';
import { renderToString } from 'react-dom/server';

class HelloMessage extends React.PureComponent {
  static defaultProps = {
    Application: <p>Missing Application :(</p>,
    applicationName: '',
    preloadedState: JSON.stringify({}),
    payload: {},
  }
  static PropTypes = {
    Application: PropTypes.element.isRequired,
    applicationName: PropTypes.string.isRequired,
    preloadedState: PropTypes.string.isRequired,
    payload: PropTypes.object.isRequired,
  }
  render() {
    const { payload, Application, applicationName, preloadedState } = this.props;
    Application.preloadedState = preloadedState;
    return (
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <title>{payload.title}</title>
          <meta name="description" content={payload.description} />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="stylesheet" href={`/static/css/${applicationName.toLowerCase()}.css`} />{/* Application CSS */}
        </head>
        <body>
          <h3>{applicationName}</h3>
          <div id="app-body" dangerouslySetInnerHTML={{ __html: renderToString(<Application />) }} /> {/* Server-Side-Rendering of Application */}
          <script dangerouslySetInnerHTML={{ __html: `window.PRELOADED_STATE=${JSON.stringify(preloadedState)};` }} /> {/* Preloaded State of Application */}
          <script src="/static/commons.js" /> {/* Just common JS */}
          <script src={`/static/${applicationName.toLowerCase()}.js`} /> {/* React Application */}
        </body>
      </html>
    );
  }
}

export default HelloMessage;

Add new <meta> tags, title, description, viewport. Add stylesheet and comment the code.
Add new <meta> tags, title, description, viewport. Add stylesheet and comment the code.
