Adds dynamic og:image generation using middleware and plain components

packages/create-redwood-app/templates/js/web/src/App.jsx

@@ -6,11 +6,11 @@ import Routes from 'src/Routes'
 
 import './index.css'
 
-const App = () => (
+const App = ({ children }) => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <RedwoodApolloProvider>
-        <Routes />
+        {children ? children : <Routes />}
       </RedwoodApolloProvider>
     </RedwoodProvider>
   </FatalErrorBoundary>

packages/create-redwood-app/templates/ts/web/src/App.tsx

@@ -6,11 +6,11 @@ import Routes from 'src/Routes'
 
 import './index.css'
 
-const App = () => (
+const App = ({ children }) => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <RedwoodApolloProvider>
-        <Routes />
+        {children ? children : <Routes />}
       </RedwoodApolloProvider>
     </RedwoodProvider>
   </FatalErrorBoundary>

packages/prerender/src/runPrerender.tsx

@@ -124,8 +124,16 @@ async function recursivelyRender(
     })
   )
 
+  // `renderPath` is *just* a path, but the LocationProvider needs a full URL
+  // object so if you need the domain to be something specific when
+  // pre-rendering (because you're showing it in HTML output or the og:image
+  // uses useLocation().host) you can set the RWJS_PRERENDER_ORIGIN env variable
+  // so that it doesn't just default to localhost
+  const prerenderUrl =
+    process.env.RWJS_PRERENDER_ORIGIN || 'http://localhost' + renderPath
+
   const componentAsHtml = ReactDOMServer.renderToString(
-    <LocationProvider location={{ pathname: renderPath }}>
+    <LocationProvider location={new URL(prerenderUrl)}>
       <CellCacheContextProvider queryCache={queryCache}>
         <App />
       </CellCacheContextProvider>

packages/router/src/location.tsx

@@ -4,27 +4,20 @@ import { createNamedContext } from './createNamedContext'
 import { gHistory } from './history'
 import type { TrailingSlashesTypes } from './util'
 
-export interface LocationContextType {
-  pathname: string
-  search?: string
-  hash?: string
-}
+export interface LocationContextType extends URL {}
 
 const LocationContext = createNamedContext<LocationContextType>('Location')
 
-interface Location {
-  pathname: string
-  search?: string
-  hash?: string
-}
+interface Location extends URL {}
+
 interface LocationProviderProps {
   location?: Location
   trailingSlashes?: TrailingSlashesTypes
   children?: React.ReactNode
 }
 
 interface LocationProviderState {
-  context: Location
+  context: Location | undefined
 }
 
 class LocationProvider extends React.Component<
@@ -75,27 +68,19 @@ class LocationProvider extends React.Component<
           break
       }
 
-      windowLocation = window.location
-    } else {
-      windowLocation = {
-        pathname: this.context?.pathname || '',
-        search: this.context?.search || '',
-        hash: this.context?.hash || '',
-      }
+      windowLocation = new URL(window.location.href)
     }
 
-    const { pathname, search, hash } = this.props.location || windowLocation
-
-    return { pathname, search, hash }
+    return this.props.location || this.context || windowLocation
   }
 
   componentDidMount() {
     this.HISTORY_LISTENER_ID = gHistory.listen(() => {
       const context = this.getContext()
       this.setState((lastState) => {
         if (
-          context.pathname !== lastState.context.pathname ||
-          context.search !== lastState.context.search
+          context?.pathname !== lastState?.context?.pathname ||
+          context?.search !== lastState?.context?.search
         ) {
           globalThis?.scrollTo(0, 0)
         }

packages/vite/src/devFeServer.ts

@@ -9,6 +9,7 @@ import type { Paths } from '@redwoodjs/project-config'
 import { getConfig, getPaths } from '@redwoodjs/project-config'
 
 import { registerFwGlobals } from './lib/registerGlobals'
+import { createExtensionRouteDef } from './middleware/extensionRouteDef'
 import { invoke } from './middleware/invokeMiddleware'
 import { collectCssPaths, componentsModules } from './streaming/collectCss'
 import { createReactStreamingHandler } from './streaming/createReactStreamingHandler'
@@ -17,13 +18,14 @@ import { ensureProcessDirWeb } from './utils'
 // TODO (STREAMING) Just so it doesn't error out. Not sure how to handle this.
 globalThis.__REDWOOD__PRERENDER_PAGES = {}
 
+const rwPaths = getPaths()
+
 async function createServer() {
   ensureProcessDirWeb()
 
   registerFwGlobals()
 
   const app = express()
-  const rwPaths = getPaths()
 
   // ~~~ Dev time validations ~~~~
   // TODO (STREAMING) When Streaming is released Vite will be the only bundler,
@@ -55,6 +57,21 @@ async function createServer() {
     appType: 'custom',
   })
 
+  // create a handler that will invoke middleware with or without a route
+  const handleWithMiddleware = (route?: RouteSpec) => {
+    return createServerAdapter(async (req: Request) => {
+      const entryServerImport = await vite.ssrLoadModule(
+        rwPaths.web.entryServer as string // already validated in dev server
+      )
+
+      const middleware = entryServerImport.middleware
+
+      const [mwRes] = await invoke(req, middleware, route ? { route } : {})
+
+      return mwRes.toResponse()
+    })
+  }
+
   // use vite's connect instance as middleware
   app.use(vite.middlewares)
 
@@ -82,22 +99,15 @@ async function createServer() {
 
     app.get(expressPathDef, createServerAdapter(routeHandler))
 
-    app.post(
-      '*',
-      createServerAdapter(async (req: Request) => {
-        const entryServerImport = await vite.ssrLoadModule(
-          rwPaths.web.entryServer as string // already validated in dev server
-        )
-
-        const middleware = entryServerImport.middleware
-
-        const [mwRes] = await invoke(req, middleware)
-
-        return mwRes.toResponse()
-      })
+    app.get(
+      createExtensionRouteDef(route.matchRegexString),
+      handleWithMiddleware(route)
     )
   }
 
+  // invokes middleware for any POST request for auth
+  app.post('*', handleWithMiddleware())
+
   const port = getConfig().web.port
   console.log(`Started server on http://localhost:${port}`)
   return await app.listen(port)

packages/vite/src/middleware/extensionRouteDef.ts

@@ -0,0 +1,9 @@
+export const createExtensionRouteDef = (matchRegexString: string): RegExp => {
+  if (matchRegexString.endsWith('/$')) {
+    // url is something like /
+    return new RegExp(matchRegexString.replace('$', 'index.*$'))
+  } else {
+    // url is something like /about
+    return new RegExp(matchRegexString.replace('$', '.*$'))
+  }
+}

packages/vite/src/middleware/invokeMiddleware.ts

@@ -1,11 +1,13 @@
 import { defaultAuthProviderState, type ServerAuthState } from '@redwoodjs/auth'
+import type { RWRouteManifestItem } from '@redwoodjs/internal/dist/routes'
 
 import { MiddlewareRequest } from './MiddlewareRequest'
 import { MiddlewareResponse } from './MiddlewareResponse'
 
 type Middleware = (
   req: MiddlewareRequest,
-  res?: MiddlewareResponse
+  res?: MiddlewareResponse,
+  route?: any
 ) => Promise<MiddlewareResponse> | Response | void
 
 /**
@@ -18,7 +20,8 @@ type Middleware = (
  */
 export const invoke = async (
   req: Request,
-  middleware?: Middleware
+  middleware?: Middleware,
+  options?: { route?: RWRouteManifestItem }
 ): Promise<[MiddlewareResponse, ServerAuthState]> => {
   if (typeof middleware !== 'function') {
     return [MiddlewareResponse.next(), defaultAuthProviderState]
@@ -28,13 +31,19 @@ export const invoke = async (
   let mwRes: MiddlewareResponse = MiddlewareResponse.next()
 
   try {
-    const output = (await middleware(mwReq)) || MiddlewareResponse.next()
+    const output =
+      (await middleware(mwReq, MiddlewareResponse.next(), options)) ||
+      MiddlewareResponse.next()
 
     if (output instanceof MiddlewareResponse) {
       mwRes = output
-    } else {
+    } else if (typeof output === 'object' && output instanceof Response) {
       // If it was a WebAPI Response
       mwRes = MiddlewareResponse.fromResponse(output)
+    } else {
+      throw new Error(
+        'Middleware must return a MiddlewareResponse or a Response'
+      )
     }
   } catch (e) {
     console.error('Error executing middleware > \n')

packages/vite/src/runFeServer.ts

@@ -8,16 +8,19 @@
 import path from 'node:path'
 import url from 'node:url'
 
 import { createServerAdapter } from '@whatwg-node/server'
+
 // @ts-expect-error We will remove dotenv-defaults from this package anyway
 import { config as loadDotEnv } from 'dotenv-defaults'
 import express from 'express'
 import { createProxyMiddleware } from 'http-proxy-middleware'
 import type { Manifest as ViteBuildManifest } from 'vite'
 
+import type { RWRouteManifestItem } from '@redwoodjs/internal/dist/routes'
 import { getConfig, getPaths } from '@redwoodjs/project-config'
 
 import { registerFwGlobals } from './lib/registerGlobals'
+import { createExtensionRouteDef } from './middleware/extensionRouteDef'
 import { invoke } from './middleware/invokeMiddleware'
 import { createRscRequestHandler } from './rsc/rscRequestHandler'
 import { setClientEntries } from './rsc/rscWorkerCommunication'
@@ -84,6 +87,18 @@
     return manifestItem.isEntry
   })
 
+  const handleWithMiddleware = (route?: RWRouteManifestItem) => {
+    return createServerAdapter(async (req: Request) => {
+      const entryServerImport = await import(rwPaths.web.entryServer as string)
+
+      const middleware = entryServerImport.middleware
+
+      const [mwRes] = await invoke(req, middleware, route ? { route } : {})
+
+      return mwRes.toResponse()
+    })
+  }
+
   if (!indexEntry) {
     throw new Error('Could not find index.html in build manifest')
   }
@@ -156,24 +171,20 @@
         return express.static(rwPaths.web.dist)(req, res, next)
       })
     }
+
+    // add express routes to capture extension requests and give them to middleware
+    // ie. /about.json, /about.png, etc
+    app.get(
+      createExtensionRouteDef(route.matchRegexString),
+      handleWithMiddleware(route)
+    )
   }
 
   // Mounting middleware at /rw-rsc will strip /rw-rsc from req.url
   app.use('/rw-rsc', createRscRequestHandler())
 
   // @MARK: put this after rw-rsc!
-  app.post(
-    '*',
-    createServerAdapter(async (req: Request) => {
-      const entryServerImport = await import(rwPaths.web.distEntryServer)
-
-      const { middleware } = entryServerImport
-
-      const [mwRes] = await invoke(req, middleware)
-
-      return mwRes.toResponse()
-    })
-  )
+  app.post('*', handleWithMiddleware())
 
   app.listen(rwConfig.web.port)
   console.log(

packages/vite/src/streaming/createReactStreamingHandler.ts

@@ -102,10 +102,10 @@ export const createReactStreamingHandler = async (
     const FallbackDocument =
       fallbackDocumentImport.Document || fallbackDocumentImport.default
 
-    const { pathname: currentPathName } = new URL(req.url)
+    const currentUrl = new URL(req.url)
 
     // @TODO validate this is correct
-    const parsedParams = matchPath(route.pathDefinition, currentPathName)
+    const parsedParams = matchPath(route.pathDefinition, currentUrl.pathname)
 
     let metaTags: TagDescriptor[] = []
 
@@ -147,7 +147,7 @@ export const createReactStreamingHandler = async (
       {
         ServerEntry,
         FallbackDocument,
-        currentPathName,
+        currentUrl,
         metaTags,
         cssLinks,
         isProd,

packages/vite/src/streaming/streamHelpers.ts

@@ -26,7 +26,7 @@ import { createServerInjectionTransform } from './transforms/serverInjectionTran
 interface RenderToStreamArgs {
   ServerEntry: any
   FallbackDocument: any
-  currentPathName: string
+  currentUrl: URL
   metaTags: TagDescriptor[]
   cssLinks: string[]
   isProd: boolean
@@ -48,7 +48,7 @@ export async function reactRenderToStreamResponse(
   const {
     ServerEntry,
     FallbackDocument,
-    currentPathName,
+    currentUrl,
     metaTags,
     cssLinks,
     isProd,
@@ -91,7 +91,7 @@ export async function reactRenderToStreamResponse(
   // @ts-expect-error Something in React's packages mean types dont come through
   const { renderToReadableStream } = await import('react-dom/server.edge')
 
-  const renderRoot = (path: string) => {
+  const renderRoot = (url: URL) => {
     return React.createElement(
       ServerAuthProvider,
       {
@@ -100,17 +100,14 @@ export async function reactRenderToStreamResponse(
       React.createElement(
         LocationProvider,
         {
-          location: {
-            pathname: path,
-          },
+          location: url,
         },
         React.createElement(
           ServerHtmlProvider,
           {
             value: injectToPage,
           },
           ServerEntry({
-            url: path,
             css: cssLinks,
             meta: metaTags,
           })
@@ -146,7 +143,7 @@ export async function reactRenderToStreamResponse(
       },
     }
 
-    const root = renderRoot(currentPathName)
+    const root = renderRoot(currentUrl)
 
     const reactStream: ReactDOMServerReadableStream =
       await renderToReadableStream(root, renderToStreamOptions)