Server rendering with ReactDOMServer

Author: smerth

server.js

@@ -18,12 +18,16 @@ server.use(sassMiddleware({
 server.set('view engine', 'ejs');
 
 
-import './serverRender';
+import serverRender from './serverRender';
 
 server.get('/', (req, res) => {
-  res.render('index', {
-    content: '...'
-  });
+  serverRender()
+    .then(content => {
+      res.render('index', {
+        content
+      });
+    })
+    .catch(console.error);
 });
 
 server.use('/api', apiRouter);

serverRender.js

@@ -1,9 +1,16 @@
-import config from './config';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
 import axios from 'axios';
 
-axios.get(`${config.serverUrl}/api/contests`)
-  .then(resp => {
-    console.log(resp.data);
-  });
+import App from './src/components/App';
+import config from './config';
 
+const serverRender = () => 
+  axios.get(`${config.serverUrl}/api/contests`)
+    .then(resp => {
+      return ReactDOMServer.renderToString(
+        <App initialContests={resp.data.contests} />
+      );
+    });
 
+export default serverRender;

src/components/App.js

@@ -6,7 +6,7 @@ import ContestPreview from './ContestPreview';
 class App extends React.Component {
   state = {
     pageHeader: 'Naming Contests',
-    contests: []
+    contests: this.props.initialContests
   };
   componentDidMount() {
     // Make Ajax call and load data response onto the state

src/index.js

@@ -4,6 +4,6 @@ import ReactDOM from 'react-dom';
 import App from './components/App';
 
 ReactDOM.render(
-  <App />,
+  <App initialContests={[]} />,
   document.getElementById('root')
 );