fix: add mechanism to support user NFs

Author: serhalp

packages/vite-plugin-react-router/README.md

@@ -61,6 +61,12 @@ export default defineConfig({
 Second, you **must** provide an `app/entry.server.tsx` (or `.jsx`) file that uses web-standard APIs compatible with the
 Deno runtime. Create a file with the following content:
 
+> [!IMPORTANT]
+>
+> This file uses `renderToReadableStream` (Web Streams API) instead of `renderToPipeableStream` (Node.js API), which is
+> required for the Deno runtime. You may customize your server entry file, but see below for important edge runtime
+> constraints.
+
 ```tsx
 import type { AppLoadContext, EntryContext } from 'react-router'
 import { ServerRouter } from 'react-router'
@@ -106,10 +112,22 @@ export default async function handleRequest(
 
 You may need to `npm install isbot` if you do not have this dependency.
 
-> [!IMPORTANT]
->
-> This file uses `renderToReadableStream` (Web Streams API) instead of `renderToPipeableStream` (Node.js API), which is
-> required for the Deno runtime. You may customize your server entry file, but see below for
+Finally, if you have your own Netlify Functions (typically in `netlify/functions`) for which you've configured a `path`,
+you must exclude those paths to avoid conflicts with the generated React Router SSR handler:
+
+```typescript
+export default defineConfig({
+  plugins: [
+    reactRouter(),
+    tsconfigPaths(),
+    netlifyReactRouter({
+      edge: true,
+      excludedPaths: ['/ping', '/api/*', '/webhooks/*'],
+    }),
+    netlify(),
+  ],
+})
+```
 
 #### Moving back from Edge Functions to Functions
 

packages/vite-plugin-react-router/src/plugin.ts

@@ -10,6 +10,16 @@ export interface NetlifyPluginOptions {
    * @default false
    */
   edge?: boolean
+  /**
+   * Paths to exclude from being handled by the React Router handler.
+   *
+   * @IMPORTANT If you have opted in to edge rendering with `edge: true` and you have your own Netlify
+   * Functions running on custom `path`s, you must exclude those paths here to avoid conflicts.
+   *
+   * @type {URLPattern[]}
+   * @default []
+   */
+  excludedPaths?: string[]
 }
 
 // https://docs.netlify.com/frameworks-api/#netlify-v1-functions
@@ -48,22 +58,23 @@ export default createRequestHandler({
 
 // This is written to the functions directory. It just re-exports
 // the compiled entrypoint, along with Netlify function config.
-function generateNetlifyFunction(handlerPath: string) {
+function generateNetlifyFunction(handlerPath: string, excludedPath: Array<string>) {
   return /* js */ `
     export { default } from "${handlerPath}";
 
     export const config = {
       name: "React Router server handler",
       generator: "${name}@${version}",
       path: "/*",
+      excludedPath: ${JSON.stringify(excludedPath)},
       preferStatic: true,
     };
     `
 }
 
 // This is written to the edge functions directory. It just re-exports
 // the compiled entrypoint, along with Netlify edge function config.
-function generateEdgeFunction(handlerPath: string, excludePath: Array<string> = []) {
+function generateEdgeFunction(handlerPath: string, excludedPath: Array<string>) {
   return /* js */ `
     export { default } from "${handlerPath}";
 
@@ -72,13 +83,14 @@ function generateEdgeFunction(handlerPath: string, excludePath: Array<string> =
       generator: "${name}@${version}",
       cache: "manual",
       path: "/*",
-      excludedPath: ${JSON.stringify(excludePath)},
+      excludedPath: ${JSON.stringify(excludedPath)},
     };
     `
 }
 
 export function netlifyPlugin(options: NetlifyPluginOptions = {}): Plugin {
-  const { edge = false } = options
+  const edge = options.edge ?? false
+  const additionalExcludedPaths = options.excludedPaths ?? []
   let resolvedConfig: ResolvedConfig
   let isProductionSsrBuild = false
   return {
@@ -147,9 +159,10 @@ export function netlifyPlugin(options: NetlifyPluginOptions = {}): Plugin {
           // not configurable, so the client out dir is always at ../client from the server out dir.
           const clientDir = join(resolvedConfig.build.outDir, '..', 'client')
           const entries = await readdir(clientDir, { withFileTypes: true })
-          const excludePath = [
+          const excludedPath = [
             '/.netlify/*',
             ...entries.map((entry) => (entry.isDirectory() ? `/${entry.name}/*` : `/${entry.name}`)),
+            ...additionalExcludedPaths,
           ]
 
           // Write the server entry point to the Netlify Edge Functions directory
@@ -158,14 +171,18 @@ export function netlifyPlugin(options: NetlifyPluginOptions = {}): Plugin {
           const relativeHandlerPath = toPosixPath(relative(edgeFunctionsDir, handlerPath))
           await writeFile(
             join(edgeFunctionsDir, FUNCTION_FILENAME),
-            generateEdgeFunction(relativeHandlerPath, excludePath),
+            generateEdgeFunction(relativeHandlerPath, excludedPath),
           )
         } else {
           // Write the server entry point to the Netlify Functions directory
           const functionsDir = join(resolvedConfig.root, NETLIFY_FUNCTIONS_DIR)
           await mkdir(functionsDir, { recursive: true })
           const relativeHandlerPath = toPosixPath(relative(functionsDir, handlerPath))
-          await writeFile(join(functionsDir, FUNCTION_FILENAME), generateNetlifyFunction(relativeHandlerPath))
+          const excludedPath = ['/.netlify/*', ...additionalExcludedPaths]
+          await writeFile(
+            join(functionsDir, FUNCTION_FILENAME),
+            generateNetlifyFunction(relativeHandlerPath, excludedPath),
+          )
         }
       }
     },

tests/e2e/fixtures/react-router-edge-site/vite.config.ts

@@ -11,5 +11,5 @@ export default defineConfig({
       plugins: [tailwindcss, autoprefixer],
     },
   },
-  plugins: [reactRouter(), netlifyPlugin({ edge: true }), tsconfigPaths()],
+  plugins: [reactRouter(), netlifyPlugin({ edge: true, excludedPaths: ['/please-blorble'] }), tsconfigPaths()],
 })

tests/e2e/react-router-user-journeys.spec.ts

@@ -232,8 +232,7 @@ test.describe('React Router user journeys', () => {
       },
     )
 
-    // FIXME(serhalp) ah yes, hrm.
-    test.skip('serves a response from a user-defined Netlify Function on a custom path', async ({
+    test('serves a response from a user-defined Netlify Function on a custom path', async ({
       page,
       reactRouterEdgeSite,
     }) => {