WIP: feat(versionpage): added version page for static and SSR

package.json

@@ -63,7 +63,8 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "rimraf": "^3.0.0"
+    "rimraf": "^3.0.0",
+    "test-listen": "^1.1.0"
   },
   "files": [
     "/*.js",
@@ -174,6 +175,7 @@
     "deepmerge": "^4.1.1",
     "git-user-name": "^2.0.0",
     "got": "10.2.2",
+    "isomorphic-unfetch": "^3.0.0",
     "make-dir": "3.0.0",
     "promisepipe": "3.0.0",
     "prompts": "2.3.0",

templates/default-ssr/src/__tests__/pages/api/version.test.js

@@ -0,0 +1,28 @@
+import http from 'http'
+import fetch from 'isomorphic-unfetch'
+import listen from 'test-listen'
+import { apiResolver } from 'next/dist/next-server/server/api-utils'
+import versionHandler from '../../../pages/api/version'
+
+jest.mock('next/config', () => () => ({
+  publicRuntimeConfig: {
+    appEnv: 'TEST'
+  }
+}))
+
+describe('/api/version handler', () => {
+  it('responds with 200 and version info', async () => {
+    const requestHandler = (req, res) => {
+      return apiResolver(req, res, undefined, versionHandler)
+    }
+    const server = http.createServer(requestHandler)
+    const url = await listen(server)
+    const response = await fetch(url)
+    const versionObj = JSON.parse(await response.text())
+
+    expect(response.status).toBe(200)
+    expect(versionObj.appEnv).toBe('TEST')
+    expect(versionObj.paths).toBeTruthy()
+    return server.close()
+  })
+})

templates/default-ssr/src/pages/api/version.js

@@ -0,0 +1,14 @@
+import getConfig from 'next/config'
+
+const { publicRuntimeConfig } = getConfig()
+
+const paths = ['/index', 'example/second-page', 'api/version']
+const versionResponse = {
+  appEnv: publicRuntimeConfig.appEnv,
+  paths
+}
+
+// eslint-disable-next-line
+export default (req, res) => {
+  res.status(200).json(versionResponse)
+}

templates/default-static/src/__tests__/pages/__snapshots__/version.test.jsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pages:Version renders the version page 1`] = `
+<DocumentFragment>
+  <div
+    data-testid="version-json"
+    id="version-json"
+  >
+    {"appEnv":"TEST","paths":["/index.html","example/second-page.html","version.html"]}
+  </div>
+</DocumentFragment>
+`;

templates/default-static/src/__tests__/pages/version.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import VersionPage from '../../pages/version'
+
+jest.mock('next/config', () => () => ({
+  publicRuntimeConfig: {
+    appEnv: 'TEST'
+  }
+}))
+
+describe('Pages:Version', () => {
+  it('renders the version page', () => {
+    const { asFragment, getByTestId } = render(<VersionPage />)
+    const versionObj = JSON.parse(getByTestId('version-json').textContent)
+
+    expect(versionObj.appEnv).toBe('TEST')
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

templates/default-static/src/pages/version.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import getConfig from 'next/config'
+
+const { publicRuntimeConfig } = getConfig()
+
+const paths = ['/index.html', 'example/second-page.html', 'version.html']
+const versionResponse = {
+  appEnv: publicRuntimeConfig.appEnv,
+  paths
+}
+
+const VersionPage = () => {
+  return (
+    <div data-testid="version-json" id="version-json">
+      {JSON.stringify(versionResponse)}
+    </div>
+  )
+}
+
+export default VersionPage

templates/default/README.md

@@ -26,16 +26,19 @@ After checking out this repo, run `npm install` to install dependencies
 Run `npm run dev` to launch a NextJS development webserver at `http://localhost:3000`
 
 ### Running in Production Mode
+
 For convenience and consistency, the preferred method of running in produciton mode is to use Docker. This will best match how an application is running on a shared environment.
 
 #### Build a Docker image
+
 Create a Docker image from your current source code by running:
 
 `npm run docker`
 
 **Warning** You must have Docker Desktop or similar Docker daemon installed and running or the script will fail.
 
 #### Run a Docker Container
+
 Once the Docker image exists in your registry of choice (local or remote), you can then run the app and specify what port it should run on:
 
 ```
@@ -45,8 +48,25 @@ docker run -p 0.0.0.0:3000:3000 %%APPNAME%%:latest
 If you'd like to run on a different port, replace the first `3000` with the desired port.
 
 #### Alternative "local" production mode
+
 Alternatively the application can be run locally without using Docker. See [NextJS documentation for more details](https://nextjs.org/docs#production-deployment).
 
+## Enviornmental Variables
+
+For nextjs, add these `process.env.<VAR>` will be found in `next.config.js` to be used in the `publicRuntimeConfig` for access inside the app. (This is so nextjs can make sure `process.env` doesn't get hard coded in the build file like webpack does).
+
+Use `APP_ENV` to define the enviornment (i.e. `default`, `dev`, `qa`, `prod`).
+
+Use `API_GATEWAY_URL` to specify the gateway.
+
+### Version Page
+
+**For SSR**, the route is `/api/version`.
+
+**For static sites**, the route is `/version.html`.
+
+> NOTE: As you add new environmental variables that should be on this version page, also place them here.
+
 ## Contributing
 
 Add new components and features using `npm run generate`. See [Contributing New Components](CONTRIBUTING.md#new-components) for more details.

templates/default/src/__tests__/pages/index/__snapshots__/index.test.jsx.snap

@@ -21,6 +21,22 @@ exports[`Pages:Homepage renders the homepage 1`] = `
       </a>
        and observe the URL changing
     </p>
+    <p
+      class="jsx-3583494339"
+    >
+      See app information on the version page at 
+      <a
+        href="/api/version"
+      >
+        SSR HERE
+      </a>
+       or 
+      <a
+        href="/version"
+      >
+        Static Site HERE
+      </a>
+    </p>
     <div
       class="jsx-2836699520 country-selector"
     >

templates/default/src/pages/index/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
 import PageTitle from '../../components/organisms/PageTitle'
+// CountrySelector doesn't work in static setup and should be separated when convenient
 import CountrySelector from '../../components/organisms/CountrySelector'
 
 const Home = () => {
@@ -13,6 +14,12 @@ const Home = () => {
         <Link href="/example/second-page">another page</Link>
         &nbsp;and observe the URL changing
       </p>
+      <p>
+        See app information on the version page at&nbsp;
+        <Link href="/api/version">SSR HERE</Link>
+        &nbsp;or&nbsp;
+        <Link href="/version">Static Site HERE</Link>
+      </p>
       <CountrySelector />
       <style jsx global>
         {`