Added React Router example configuration

Author: Andre Rabold

handler.ts

@@ -8,6 +8,6 @@ export const serve = async (event: APIGatewayEvent, context: Context): Promise<A
     headers: {
       "Content-Type": "text/html",
     },
-    body: await render(),
+    body: await render(event),
   };
 };

package-lock.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-router-dom": "^5.2.0",
     "source-map-support": "^0.5.19"
   },
   "devDependencies": {
@@ -39,6 +40,7 @@
     "@types/prettier": "^2.1.6",
     "@types/react": "^16.14.2",
     "@types/react-dom": "^16.9.10",
+    "@types/react-router-dom": "^5.1.7",
     "@types/serverless": "^1.78.20",
     "@types/source-map-support": "^0.5.3",
     "@types/webpack": "^4.41.26",

package.json

@@ -1,24 +1,25 @@
 import "./App.css";
 
 import React from "react";
+import { Route, Switch } from "react-router-dom";
 
 import useConfig from "../components/useConfig";
-import logo from "./logo.svg";
+import MainPage from "./pages/MainPage";
+import ErrorPage from "./pages/ErrorPage";
 
 /**
  * Our Web Application
  */
 export default function App() {
-  const config = useConfig();
+  const { app } = useConfig();
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <h1 className="App-title">Welcome to {config.app.TITLE}</h1>
-      </header>
-      <p className="App-intro">
-        To get started, edit <code>src/browser/App.jsx</code> and save to reload.
-      </p>
-    </div>
+    <Switch>
+      <Route exact path="/">
+        <MainPage />
+      </Route>
+      <Route>
+        <ErrorPage />
+      </Route>
+    </Switch>
   );
 }

src/browser/App.tsx

@@ -5,6 +5,7 @@ import "./index.css";
  */
 import React from "react";
 import { hydrate } from "react-dom";
+import { BrowserRouter } from "react-router-dom";
 
 import ConfigContext from "../components/ConfigContext";
 import { Config } from "../server/config";
@@ -15,9 +16,13 @@ const config = (window as any).__CONFIG__ as Config;
 delete (window as any).__CONFIG__;
 /* eslint-enable @typescript-eslint/no-unsafe-member-access */
 
+const basename = config.app.URL.match(/^(?:https?:\/\/)?[^\/]+(\/?.+)?$/i)?.[1];
+
 hydrate(
   <ConfigContext.Provider value={config}>
-    <App />
+    <BrowserRouter basename={basename}>
+      <App />
+    </BrowserRouter>
   </ConfigContext.Provider>,
   document.querySelector("#root"),
 );

src/browser/index.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function ErrorPage() {
+  return <div>404</div>;
+}

src/browser/pages/ErrorPage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import useConfig from "../../components/useConfig";
+import logo from "../logo.svg";
+
+export default function MainPage() {
+  const { app } = useConfig();
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <h1 className="App-title">Welcome to {app.TITLE}</h1>
+      </header>
+      <p className="App-intro">
+        To get started, edit <code>src/browser/App.jsx</code> and save to reload.
+      </p>
+    </div>
+  );
+}

src/browser/pages/MainPage.tsx

@@ -22,7 +22,9 @@ const config = {
     /** Theme is also loaded from the `manifest.json` */
     THEME_COLOR: manifest.theme_color,
     /** URL to our public API Gateway endpoint */
-    URL: isLocal ? "http://localhost:3000" : String(process.env.APIGATEWAY_URL),
+    URL: isLocal
+      ? `http://localhost:3000/${process.env.SERVERLESS_STAGE || "dev"}`
+      : String(process.env.APIGATEWAY_URL),
     /** Where the bundled distribution files (`index.js`, `index.css`) are hosted */
     DIST_URL: isLocal ? "http://localhost:8080" : String(process.env.APP_DIST_URL),
     /** Where the contents of the `public` folder are hosted (might be the same as `config.app.DIST_URL`) */

src/server/config.tsx

@@ -2,7 +2,9 @@
  * Server Side Rendering
  */
 import React from "react";
+import { APIGatewayEvent } from "aws-lambda";
 import { renderToString } from "react-dom/server";
+import { StaticRouter } from "react-router-dom";
 
 import App from "../browser/App";
 import ConfigContext from "../components/ConfigContext";
@@ -16,7 +18,7 @@ const isLocal = process.env.IS_LOCAL || process.env.IS_OFFLINE;
 /**
  * Server-side rendering
  */
-export default async function render(): Promise<string> {
+export default async function render(event: APIGatewayEvent): Promise<string> {
   let stats: Stats = { main: "index.js", css: "index.css" };
   if (!isLocal) {
     try {
@@ -28,7 +30,9 @@ export default async function render(): Promise<string> {
 
   const content = renderToString(
     <ConfigContext.Provider value={config}>
-      <App />
+      <StaticRouter basename={config.app.URL} location={event.path}>
+        <App />
+      </StaticRouter>
     </ConfigContext.Provider>,
   );
   return html({ stats, content, config });