(core) add react-helmet for head editing on routes (react-boilerplate…

…#691)

* (feat) React-Helmet Added

* (docs) React Helmet and partial SEO support

* (fix) Lint errors correction

README.md

@@ -69,6 +69,9 @@
 
   <dt>Offline-first</dt>
   <dd>The next frontier in performant web apps: availability without a network connection from the instant your users load the app.</dd>
+
+  <dt>SEO</dt>
+  <dd>We support SEO (document head tags management) for search engines that support indexing of JavaScript content. (eg. Google)</dd>
 </dl>
 
 But wait... there's more!

app/containers/App/index.js

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import Helmet from 'react-helmet';
 
 // Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
 import 'sanitize.css/sanitize.css';
@@ -21,6 +22,13 @@ import styles from './styles.css';
 function App(props) {
   return (
     <div className={styles.wrapper}>
+      <Helmet
+        titleTemplate="%s - React.js Boilerplate"
+        defaultTitle="React.js Boilerplate"
+        meta={[
+          { name: 'description', content: 'A React.js Boilerplate application' },
+        ]}
+      />
       <A className={styles.logoWrapper} href="https://twitter.com/mxstbr">
         <Img className={styles.logo} src={Banner} alt="react-boilerplate - Logo" />
       </A>

app/containers/FeaturePage/index.js

@@ -6,6 +6,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
+import Helmet from 'react-helmet';
 
 import Button from 'components/Button';
 import H1 from 'components/H1';
@@ -33,6 +34,12 @@ export class FeaturePage extends React.Component {
   render() {
     return (
       <div>
+        <Helmet
+          title="Feature Page"
+          meta={[
+            { name: 'description', content: 'Feature page of React.js Boilerplate application' },
+          ]}
+        />
         <H1>Features</H1>
         <ul className={styles.list}>
           <li className={styles.listItem}>

app/containers/HomePage/index.js

@@ -7,6 +7,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
+import Helmet from 'react-helmet';
 
 import { createStructuredSelector } from 'reselect';
 
@@ -78,6 +79,12 @@ export class HomePage extends React.Component {
 
     return (
       <article>
+        <Helmet
+          title="Home Page"
+          meta={[
+            { name: 'description', content: 'A React.js Boilerplate application homepage' },
+          ]}
+        />
         <div>
           <section className={`${styles.textSection} ${styles.centered}`}>
             <H2>Start your next react project in seconds</H2>

docs/README.md

@@ -100,6 +100,11 @@ building for production so you don't have to worry about that.
 See the [JS documentation](./js/README.md) for more information about the
 JavaScript side of things.
 
+### SEO
+
+We use [react-helmet](https://github.com/nfl/react-helmet) for managing document head tags. Examples on how to
+write head tags can be found [here](https://github.com/nfl/react-helmet#examples).
+
 ### Testing
 
 For a thorough explanation of the testing procedure, see the

internals/generators/container/index.js

@@ -18,6 +18,11 @@ module.exports = {
 
       return 'The name is required';
     },
+  }, {
+    type: 'confirm',
+    name: 'wantHeaders',
+    default: false,
+    message: 'Do you want headers?',
   }, {
     type: 'confirm',
     name: 'wantCSS',

internals/generators/container/index.js.hbs

@@ -6,6 +6,9 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
+{{#if wantHeaders}}
+import Helmet from 'react-helmet';
+{{/if}}
 {{#if wantActionsAndReducer}}
 import select{{properCase name}} from './selectors';
 {{/if}}
@@ -21,6 +24,14 @@ export class {{ properCase name }} extends React.Component { // eslint-disable-l
       {{else}}
       <div>
       {{/if}}
+        {{#if wantHeaders}}
+        <Helmet
+          title="{{properCase name}}"
+          meta={{curly true}}[
+            {{curly true}} name: 'description', content: 'Description of {{properCase name}}' {{curly}},
+          ]{{curly}}
+        />
+        {{/if}}
       This is {{properCase name}} container !
       </div>
     );

package.json

@@ -136,6 +136,7 @@
     "minimist": "1.2.0",
     "react": "15.2.1",
     "react-dom": "15.2.1",
+    "react-helmet": "3.1.0",
     "react-redux": "4.4.5",
     "react-router": "2.5.2",
     "react-router-redux": "4.0.5",