Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated example app (server-side rendering)
- Loading branch information
Showing
22 changed files
with
376 additions
and
155 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,11 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <link rel="stylesheet" type="text/css" href="/assets/style.css"/> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> | ||
| <link rel='stylesheet' type='text/css' href='/assets/style.css'/> | ||
| <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| <script src="/assets/bundle.js"></script> | ||
| <div id='app'></div> | ||
| <script src='/assets/bundle.js'></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import path from 'path'; | ||
| import express from 'express'; | ||
| import compression from 'compression'; | ||
| import React from 'react'; | ||
| import { renderToStaticMarkup, renderToString } from 'react-dom/server'; | ||
| import { match, RouterContext } from 'react-router'; | ||
| import Helmet from 'react-helmet'; | ||
| import routes from './src/routes.js'; | ||
| import Layout from './src/components/Layout.js'; | ||
| import DataWrapper from './src/components/DataWrapper.js'; | ||
| import api from './src/api.js'; | ||
|
|
||
| // Fetch data based on route (path, params) here | ||
| async function fetchData(path, params){ | ||
| if (path === '/'){ | ||
| const photos = await api.getPopularPhotos(1); | ||
| var serverData = { path: path, data: photos }; | ||
| return serverData; | ||
| } | ||
| } | ||
|
|
||
| var server = express(); | ||
|
|
||
| server | ||
| .use(compression()) | ||
| .use('/assets', express.static(path.join(__dirname, './../public/assets'), { index: false, maxAge: 31536000000 })) | ||
| .use((req, res, next) => { | ||
| match( | ||
| { routes: routes, location: req.url }, | ||
| async (error, redirectLocation, renderProps) => { | ||
|
|
||
| if (error){ | ||
| res.status(500).send(error.message); | ||
| } else if (redirectLocation) { | ||
| res.redirect(301, redirectLocation.pathname + redirectLocation.search); | ||
| } else if (!renderProps) { // Should never happen if we have a catch-all (*) error page route | ||
| res.status(404).send('Page not found'); | ||
| } else { | ||
|
|
||
| const serverData = await fetchData(req.url, renderProps.params); | ||
|
|
||
| // Render route as a string | ||
| var markup = renderToString( | ||
| <DataWrapper serverData={serverData}> | ||
| <RouterContext {...renderProps} /> | ||
| </DataWrapper> | ||
| ); | ||
|
|
||
| // Extract data for page <head> (title, meta, scripts) | ||
| // See: https://github.com/nfl/react-helmet#server-usage | ||
| var head = Helmet.rewind(); | ||
|
|
||
| // Render layout and pass in markup, serverData fetched server-side, and head | ||
| // We use renderToStaticMarkup for layout so react-id dom attributes aren't added | ||
| res.send( | ||
| renderToStaticMarkup( <Layout markup={markup} serverData={serverData} head={head} /> ) | ||
| ); | ||
|
|
||
| } | ||
| } | ||
| ); | ||
| }) | ||
| .listen( (process.env.PORT || 3000), (err, result) => { | ||
| if (err) { | ||
| console.log(err); | ||
| } | ||
| console.log('Server started'); | ||
| }); | ||
|
|
||
| module.exports = server |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| var React = require('react'); | ||
| var Helmet = require('react-helmet'); | ||
|
|
||
| var NotFoundComponent = React.createClass({ | ||
| render(){ | ||
| return ( | ||
| <div> | ||
| <Helmet title="Page not found" /> | ||
| Oops.. That page could not be found. | ||
| </div> | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| module.exports = NotFoundComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from 'react'; | ||
|
|
||
| class DataWrapper extends React.PureComponent { | ||
|
|
||
| getChildContext () { | ||
| return { | ||
| serverData: this.props.serverData | ||
| }; | ||
| } | ||
|
|
||
| render(){ | ||
| return this.props.children; | ||
| } | ||
| }; | ||
|
|
||
| DataWrapper.childContextTypes = { | ||
| serverData: React.PropTypes.object | ||
| }; | ||
|
|
||
| export default DataWrapper; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| { | ||
| "name": "infinite", | ||
| "version": "0.0.1", | ||
| "description": "", | ||
| "main": "lib/infinite.js", | ||
| "scripts": { | ||
|
|
||
| }, | ||
| "peerDependencies": { | ||
| "react": ">=0.12.0 <16.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-core": "6.18.2", | ||
| "babel-loader": "6.2.8", | ||
| "babel-preset-es2015": "6.18.0", | ||
| "babel-preset-react": "6.16.0", | ||
| "url-loader": "^0.5.7", | ||
| "webpack": "1.13.3" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "" | ||
| }, | ||
| "author": "Gabe Ragland <gabe.ragland@gmail.com>", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "" | ||
| }, | ||
| "keywords": [ | ||
|
|
||
| ], | ||
| "homepage": "" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from 'react'; | ||
|
|
||
| const Layout = ({ markup, head, serverData }) => ( | ||
| <html> | ||
| <head> | ||
| <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> | ||
| <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' /> | ||
|
|
||
| {head.title.toComponent()} | ||
| {head.meta.toComponent()} | ||
|
|
||
| <link rel='stylesheet' type='text/css' href='/assets/style.css'/> | ||
| </head> | ||
| <body> | ||
| <div id='app' dangerouslySetInnerHTML={{__html: markup}}></div> | ||
|
|
||
| { serverData && | ||
| <script id='serverData' type='application/json' dangerouslySetInnerHTML={{__html: safeStringify(serverData)}}></script> | ||
| } | ||
|
|
||
| <script src='/assets/bundle.js'></script> | ||
| </body> | ||
| </html> | ||
| ); | ||
|
|
||
| function safeStringify(obj){ | ||
| return JSON.stringify(obj).replace(/<\/script/g, '<\\/script').replace(/<!--/g, '<\\!--'); | ||
| } | ||
|
|
||
| export default Layout; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.