Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SSR title/meta with react-helmet #12

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

SSR title/meta with react-helmet #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"morgan": "^1.8.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-helmet": "^5.1.3",
"react-redux": "^5.0.4",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0"
Expand Down
3 changes: 2 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Server Side Rendering - Create React App</title>
{{HELMET_TITLE}}
{{HELMET_META}}
</head>
<body>
<noscript>
Expand Down
8 changes: 7 additions & 1 deletion server/universal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ const path = require('path')
const fs = require('fs')

const React = require('react')
import { Helmet } from 'react-helmet'
const {Provider} = require('react-redux')
const {renderToString} = require('react-dom/server')
const {StaticRouter} = require('react-router-dom')
Expand Down Expand Up @@ -34,8 +35,13 @@ module.exports = function universalLoader(req, res) {
// Somewhere a `<Redirect>` was rendered
redirect(301, context.url)
} else {
const helmet = Helmet.renderStatic()
// we're good, send the response
const RenderedApp = htmlData.replace('{{SSR}}', markup)
const RenderedApp = htmlData
.replace('{{SSR}}', markup)
.replace('{{HELMET_TITLE}}', helmet.title.toString())
.replace('{{HELMET_META}}', helmet.meta.toString())

res.send(RenderedApp)
}
})
Expand Down
5 changes: 5 additions & 0 deletions src/containers/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
import { Helmet } from 'react-helmet'
import FirstPage from './FirstPage'
import SecondPage from './SecondPage'
import NoMatch from '../components/NoMatch'
Expand All @@ -8,6 +9,10 @@ export default class App extends Component {
render(){
return (
<div>
<Helmet defaultTitle="ssr-create-react-app-v2" titleTemplate="%s - ssr-create-react-app-v2">
<meta name="description" content="This is the v2, its much better written, and uses react-router v4, which is actually pretty nice" />
</Helmet>

<h1>Server Side Rendering with Create React App v2</h1>
<p>Hey, so I've rewritten this example with react-router v4</p>
<p>This code is on github: <a href='https://github.com/ayroblu/ssr-create-react-app-v2'>https://github.com/ayroblu/ssr-create-react-app-v2</a></p>
Expand Down
5 changes: 5 additions & 0 deletions src/containers/FirstPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { Component } from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

Expand All @@ -11,6 +12,10 @@ class FirstPage extends Component {
const b64 = this.props.staticContext ? 'wait for it' : window.btoa('wait for it')
return (
<div className='bold'>
<Helmet>
<title>First Page</title>
</Helmet>

<h2>First Page</h2>
<p>{`Email: ${this.props.user.email}`}</p>
<p>{`b64: ${b64}`}</p>
Expand Down