diff --git a/src/app.js b/src/app.js new file mode 100644 index 00000000..96d90d3a --- /dev/null +++ b/src/app.js @@ -0,0 +1,38 @@ +import React from 'react'; +import ReactDOMServer from 'react-dom/server'; +import Helmet from 'react-helmet'; +import { BrowserRouter, ServerRouter } from 'react-router'; +import Routes from './Routes'; + +export const ClientApp = () => ( + + + +); + +export const ServerApp = (props) => { + const { url, context } = props; + return ( + + + + ); +}; + +/** + * Render the given route. + * + * @param {String} url Path to render + * @param {Object} serverContext Server rendering context from react-router + * + * @returns {Object} Object with keys: + * - {String} body: Rendered application body of the given route + * - {Object} head: Application head metadata from react-helmet + */ +export const renderApp = (url, serverContext) => { + const body = ReactDOMServer.renderToString( + + ); + const head = Helmet.rewind(); + return { head, body }; +}; diff --git a/src/index.js b/src/index.js index 3c9cbe6c..d5c92c40 100644 --- a/src/index.js +++ b/src/index.js @@ -13,49 +13,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import ReactDOMServer from 'react-dom/server'; -import Helmet from 'react-helmet'; -import { BrowserRouter, ServerRouter } from 'react-router'; -import Routes from './Routes'; +import { ClientApp, renderApp } from './app'; + import './index.css'; -const ClientApp = () => ( - - - -); - -const ServerApp = (props) => { - const { url, context } = props; - return ( - - - - ); -}; - // If we're in a browser already, render the client application. if (typeof window !== 'undefined') { ReactDOM.render(, document.getElementById('root')); } -/** - * Render the given route. - * - * @param {String} url Path to render - * @param {Object} serverContext Server rendering context from react-router - * - * @returns {Object} Object with keys: - * - {String} body: Rendered application body of the given route - * - {Object} head: Application head metadata from react-helmet - */ -const renderApp = (url, serverContext) => { - const body = ReactDOMServer.renderToString( - - ); - const head = Helmet.rewind(); - return { head, body }; -}; - // Export the function for server side rendering. export default renderApp;