add prerenderReady call and meta tag optimizations for Page Not Found state

Author: george

app/components/DocsRoutes/__tests__/DocsRoutes.spec.js

@@ -2,6 +2,8 @@ import React from "react"
 import { BrowserRouter as Router } from "react-router-dom"
 import DocsRoutes from "../DocsRoutes"
 
+jest.mock("app/components/PageNotFound", () => global.simpleMock("PageNotFound"))
+
 function mountRoutes() {
   return mount(
     <Router>

app/components/DocsRoutes/__tests__/__snapshots__/DocsRoutes.spec.js.snap

@@ -82,20 +82,7 @@ exports[`<DocsRoutes /> renders 1`] = `
                 "url": "/",
               }
             }
-          >
-            <div
-              className="has-padding-4 has-center-text"
-            >
-              <h1>
-                Sorry, that page doesn't exist. :(
-              </h1>
-              <p
-                className="has-no-margin-bottom"
-              >
-                Did you enter the URL correctly?
-              </p>
-            </div>
-          </PageNotFound>
+          />
         </Route>
       </Switch>
     </DocsRoutes>

app/components/PageNotFound/PageNotFound.js

@@ -1,8 +1,11 @@
 import React from "react"
 
+import SetMeta from "app/components/SetMeta"
+
 const PageNotFound = () => {
   return (
     <div className="has-padding-4 has-center-text">
+      <SetMeta pageNotFound={true} />
       <h1>{"Sorry, that page doesn't exist. :("}</h1>
       <p className="has-no-margin-bottom">{"Did you enter the URL correctly?"}</p>
     </div>

app/components/PageNotFound/__tests__/PageNotFound.spec.js

@@ -1,6 +1,8 @@
 import React from "react"
 import PageNotFound from "../PageNotFound"
 
+jest.mock("app/components/SetMeta", () => global.simpleMock("SetMeta"))
+
 describe("<PageNotFound />", () => {
   let wrapper
   beforeAll(() => {

app/components/PageNotFound/__tests__/__snapshots__/PageNotFound.spec.js.snap

@@ -5,6 +5,9 @@ exports[`<PageNotFound /> renders 1`] = `
   <div
     className="has-padding-4 has-center-text"
   >
+    <SetMeta
+      pageNotFound={true}
+    />
     <h1>
       Sorry, that page doesn't exist. :(
     </h1>

app/components/SetMeta/SetMeta.js

@@ -4,8 +4,15 @@ import { Helmet } from "react-helmet"
 
 export default class SetMeta extends React.Component {
   static propTypes = {
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    description: PropTypes.string,
+    pageNotFound: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    title: "Page Not Found",
+    description: "",
+    pageNotFound: false,
   }
 
   render() {
@@ -14,8 +21,11 @@ export default class SetMeta extends React.Component {
         <title itemProp="name" lang="en">
           {this.props.title}
         </title>
+
         <meta name="description" content={this.props.description} />
         <link rel="canonical" href={window.location.href} />
+
+        {this.props.pageNotFound && <meta name="prerender-status-code" content="404" />}
       </Helmet>
     )
   }

app/components/SetMeta/__tests__/SetMeta.spec.js

@@ -6,4 +6,9 @@ describe("<SetMeta />", () => {
     const wrapper = mount(<SetMeta title="Test title" description="Test description" />)
     expect(wrapper).toMatchSnapshot()
   })
+
+  it("renders with pageNotFound state", () => {
+    const wrapper = mount(<SetMeta pageNotFound={true} />)
+    expect(wrapper).toMatchSnapshot()
+  })
 })

app/components/SetMeta/__tests__/__snapshots__/SetMeta.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`<SetMeta /> renders 1`] = `
 <SetMeta
   description="Test description"
+  pageNotFound={false}
   title="Test title"
 >
   <HelmetWrapper
@@ -70,3 +71,83 @@ exports[`<SetMeta /> renders 1`] = `
   </HelmetWrapper>
 </SetMeta>
 `;
+
+exports[`<SetMeta /> renders with pageNotFound state 1`] = `
+<SetMeta
+  description=""
+  pageNotFound={true}
+  title="Page Not Found"
+>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+    titleTemplate="Undernet – %s"
+  >
+    <SideEffect(NullComponent)
+      defer={true}
+      encodeSpecialCharacters={true}
+      link={
+        Array [
+          Object {
+            "href": "http://localhost/",
+            "rel": "canonical",
+          },
+        ]
+      }
+      meta={
+        Array [
+          Object {
+            "content": "",
+            "name": "description",
+          },
+          Object {
+            "content": "404",
+            "name": "prerender-status-code",
+          },
+        ]
+      }
+      title="Page Not Found"
+      titleAttributes={
+        Object {
+          "itemprop": "name",
+          "lang": "en",
+        }
+      }
+      titleTemplate="Undernet – %s"
+    >
+      <NullComponent
+        defer={true}
+        encodeSpecialCharacters={true}
+        link={
+          Array [
+            Object {
+              "href": "http://localhost/",
+              "rel": "canonical",
+            },
+          ]
+        }
+        meta={
+          Array [
+            Object {
+              "content": "",
+              "name": "description",
+            },
+            Object {
+              "content": "404",
+              "name": "prerender-status-code",
+            },
+          ]
+        }
+        title="Page Not Found"
+        titleAttributes={
+          Object {
+            "itemprop": "name",
+            "lang": "en",
+          }
+        }
+        titleTemplate="Undernet – %s"
+      />
+    </SideEffect(NullComponent)>
+  </HelmetWrapper>
+</SetMeta>
+`;

app/index.js

@@ -8,6 +8,17 @@ if (!modernBrowser) {
   polyfills.push(import(/* webpackChunkName: "polyfill" */ "core-js/stable"))
 }
 
+// Tell prerender.io we're ready to prerender
+const readyToPrerender = () => {
+  window.prerenderReady = true
+}
+
+const importApp = () => {
+  return import(/* webpackChunkName: "app" */ "./app")
+    .then(() => readyToPrerender())
+    .catch(error => console.error("Polyfills were resolved but the app was not.", error))
+}
+
 Promise.all(polyfills)
-  .then(() => import(/* webpackChunkName: "app" */ "./app"))
-  .catch(error => console.error("Uh oh! Polyfills couldn't load!", error))
+  .then(importApp)
+  .catch(error => console.error("Polyfills could not load.", error))

public/index.html

@@ -12,6 +12,9 @@
       gtag("config", "UA-129032354-1")
     </script>
 
+    <!-- Tell prerender.io not to get a snapshot of the page at first -->
+    <script>window.prerenderReady = false;</script>
+
     <!-- Title is redundantly set in src/pages/Home/Home.js for accessibility -->
     <title lang="en" itemprop="name">
       Undernet – A modular, configuration-first front-end framework. No strings.