diff --git a/public/index.html b/public/index.html index 98ca1e12..d9b908ad 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - %-title% + %=title% diff --git a/server/index.js b/server/index.js index c07bb821..6ba3525c 100644 --- a/server/index.js +++ b/server/index.js @@ -1,3 +1,5 @@ +require('source-map-support').install(); + const express = require('express'); const path = require('path'); const fs = require('fs'); @@ -24,10 +26,11 @@ const template = _.template(indexHtml, { evaluate: /($^)/ }); -function render(url, context, title) { +function render(url, context) { + const { head, body } = renderApp(url, context) return template({ - title, - body: renderApp(url, context) + title: head.title.toString(), + body }); } @@ -37,12 +40,8 @@ const app = express(); app.use('/static', express.static(path.join(buildPath, 'static'))); app.get('*', (req, res) => { - - // TODO: use react-helmet for metadata handling - const title = 'Sharetribe Starter App'; - const context = createServerRenderContext(); - const html = render(req.url, context, title); + const html = render(req.url, context); const result = context.getResult(); if (result.redirect) { diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index a8534a7e..593262d4 100644 --- a/src/components/Page/Page.js +++ b/src/components/Page/Page.js @@ -1,9 +1,11 @@ import React from 'react'; +import Helmet from 'react-helmet'; export default (props) => { const { className, title, children } = props; return (
+

{ title }

{ children }
diff --git a/src/index.js b/src/index.js index 62a9ea6f..2e7f3093 100644 --- a/src/index.js +++ b/src/index.js @@ -1,23 +1,33 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { renderToString } from 'react-dom/server'; +import ReactDOMServer from 'react-dom/server'; +import Helmet from 'react-helmet'; import { BrowserRouter, ServerRouter } from 'react-router'; import Routes from './Routes'; import './index.css'; +const ClientApp = () => ( + + + +); + +const ServerApp = (props) => ( + + + +); + if (typeof window !== 'undefined') { - ReactDOM.render( - - - , - document.getElementById('root') - ); + ReactDOM.render(, document.getElementById('root')); } -export default function render(url, serverContext) { - return renderToString( - - - +const renderApp = (url, serverContext) => { + const body = ReactDOMServer.renderToString( + ); -} + const head = Helmet.rewind(); + return { head, body }; +}; + +export default renderApp;