From a21c8ee76ec73abd88dd6e0eee23c848c6a997ec Mon Sep 17 00:00:00 2001 From: Andre Rabold Date: Tue, 2 Feb 2021 11:34:30 -0800 Subject: [PATCH] Added React Router example configuration --- handler.ts | 2 +- package-lock.json | 127 +++++++++++++++++++++++++++++++- package.json | 2 + src/browser/App.tsx | 23 +++--- src/browser/index.tsx | 7 +- src/browser/pages/ErrorPage.tsx | 5 ++ src/browser/pages/MainPage.tsx | 19 +++++ src/server/render.tsx | 8 +- 8 files changed, 175 insertions(+), 18 deletions(-) create mode 100644 src/browser/pages/ErrorPage.tsx create mode 100644 src/browser/pages/MainPage.tsx diff --git a/handler.ts b/handler.ts index 3051675..e11e849 100644 --- a/handler.ts +++ b/handler.ts @@ -8,6 +8,6 @@ export const serve = async (event: APIGatewayEvent, context: Context): Promise -
- logo -

Welcome to {config.app.TITLE}

-
-

- To get started, edit src/browser/App.jsx and save to reload. -

- + + + + + + + + ); } diff --git a/src/browser/index.tsx b/src/browser/index.tsx index 21ddf2f..00b256b 100644 --- a/src/browser/index.tsx +++ b/src/browser/index.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( - + + + , document.querySelector("#root"), ); diff --git a/src/browser/pages/ErrorPage.tsx b/src/browser/pages/ErrorPage.tsx new file mode 100644 index 0000000..5ffec99 --- /dev/null +++ b/src/browser/pages/ErrorPage.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function ErrorPage() { + return
404
; +} diff --git a/src/browser/pages/MainPage.tsx b/src/browser/pages/MainPage.tsx new file mode 100644 index 0000000..c9abd0b --- /dev/null +++ b/src/browser/pages/MainPage.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 ( +
+
+ logo +

Welcome to {app.TITLE}

+
+

+ To get started, edit src/browser/App.jsx and save to reload. +

+
+ ); +} diff --git a/src/server/render.tsx b/src/server/render.tsx index b420125..3b09617 100644 --- a/src/server/render.tsx +++ b/src/server/render.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 { +export default async function render(event: APIGatewayEvent): Promise { let stats: Stats = { main: "index.js", css: "index.css" }; if (!isLocal) { try { @@ -28,7 +30,9 @@ export default async function render(): Promise { const content = renderToString( - + + + , ); return html({ stats, content, config });