client: Add static html export using next@3

client/.gitignore

@@ -1 +1,2 @@
 .next
+out

client/components/Layout.js

@@ -15,10 +15,7 @@ const enhance = withContext({
   isMobile: isMobile(userAgent),
 }));
 
-const Layout = ({
-  children,
-  userAgent,
-}) => (
+const Layout = ({ children }) => (
   <ThemeProvider theme={createUwaveTheme()}>
     <div className="app">
       <SSR />

client/next.config.js

@@ -15,3 +15,8 @@ exports.webpack = (config) => {
 
   return config
 }
+
+exports.exportPathMap = () => ({
+  '/': { page: '/' },
+  '/about': { page: '/about' }
+})

client/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^6.8.0",
     "babel-preset-env": "^1.5.2",
+    "ecstatic": "^2.2.1",
     "is-mobile": "^0.2.2",
     "isomorphic-fetch": "^2.2.1",
     "material-ui": "^1.0.0-alpha.20",
@@ -22,6 +23,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "deploy": "now -e HUB_SERVER=https://announce.u-wave.net/"
+    "deploy": "now -e HUB_SERVER=https://announce.u-wave.net/",
+    "export": "next build && next export -o out",
+    "static": "ecstatic out"
   }
 }

client/pages/about.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Markdown from 'react-markdown';
+import getUserAgent from '../util/getUserAgent';
 import Layout from '../components/Layout';
 
 const text = `
@@ -21,7 +22,7 @@ const Image = props => (
 export default class About extends React.Component {
   static async getInitialProps({ req }) {
     return {
-      userAgent: req ? req.headers['user-agent'] : navigator.userAgent,
+      userAgent: getUserAgent(req),
     };
   }
 

client/pages/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import fetch from 'isomorphic-fetch';
 import ms from 'ms';
 import { CircularProgress } from 'material-ui/Progress';
-
+import getUserAgent from '../util/getUserAgent';
 import Layout from '../components/Layout';
 import Loading from '../components/Loading';
 import ServerListing from '../components/ServerListing';
@@ -27,11 +27,12 @@ async function loadServers() {
 
 export default class App extends React.Component {
   static async getInitialProps({ req }) {
+    const isExporting = req && !req.headers && typeof navigator === 'undefined';
     return {
       // If we're serving a new request, preload the servers.
       // If we're transitioning on the client, show a loading indicator.
-      servers: req ? await loadServers() : null,
-      userAgent: req ? req.headers['user-agent'] : navigator.userAgent,
+      servers: req && !isExporting ? await loadServers() : null,
+      userAgent: getUserAgent(req),
     };
   }
 

client/util/getUserAgent.js

@@ -0,0 +1,10 @@
+export default function getUserAgent(req) {
+  if (req && req.headers) {
+    return req.headers['user-agent'];
+  }
+  if (typeof navigator !== 'undefined' && navigator.userAgent) {
+    return navigator.userAgent;
+  }
+  return 'all';
+}
+