feat(@netlify/vite-plugin-react-router): add edge support (#562)

This adds opt-in support for deploying React Router 7 apps to Netlify Edge Functions (Deno runtime) via the `edge: boolean` plugin option. Previously, the plugin only supported Netlify Functions (Node.js runtime).

- Add `edge?: boolean` option to Vite plugin factory
- When `edge` is enabled:
  - Configure Vite SSR build with `target: 'webworker'` and other Deno-compatible build config
  - Generate an edge function in `.netlify/v1/edge-functions/`, instead of a function `.netlify/v1/functions/`
- Add `excludedPaths?: string[]` option to allow users to exclude paths from the React Router handler. Required when using `edge: true` and the project also has its own Netlify Functions with a configured `path`, otherwise only the RR handler runs on all dynamic paths.

Author: serhalp

.github/workflows/e2e.yml

@@ -25,10 +25,10 @@ jobs:
 
       - run: corepack enable
       - name: Install Deno
-        uses: denoland/setup-deno@v1
+        uses: denoland/setup-deno@v2
         with:
           # Should match the `DENO_VERSION_RANGE` from https://github.com/netlify/edge-bundler/blob/main/node/bridge.ts#L17
-          deno-version: v1.37.0
+          deno-version: v2.2.4
       - run: pnpm install
 
       - name: Install Playwright Browsers

.github/workflows/publint.yml

@@ -0,0 +1,37 @@
+name: Publint
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - '**'
+      - '!release-please--**'
+  merge_group:
+jobs:
+  publint:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - run: git config --global core.symlinks true
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+      - run: corepack enable pnpm
+      - name: Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'pnpm'
+      - name: Install Deno
+        uses: denoland/setup-deno@v2
+        with:
+          # Should satisfy the `DENO_VERSION_RANGE` from https://github.com/netlify/edge-bundler/blob/main/node/bridge.ts#L17
+          deno-version: v2.2.4
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm run build:packages
+      - name: Publint
+        run: pnpm run --filter '@netlify/*' publint

.github/workflows/release-please.yml

@@ -28,10 +28,10 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
         if: ${{ steps.release.outputs.releases_created }}
       - name: Install Deno
-        uses: denoland/setup-deno@v1
+        uses: denoland/setup-deno@v2
         with:
           # Should satisfy the `DENO_VERSION_RANGE` from https://github.com/netlify/edge-bundler/blob/main/node/bridge.ts#L17
-          deno-version: v1
+          deno-version: v2.2.4
         if: ${{ steps.release.outputs.releases_created }}
       - run: corepack enable
       - name: Install dependencies

.github/workflows/test.yml

@@ -22,10 +22,10 @@ jobs:
           check-latest: true
       - run: corepack enable
       - name: Install Deno
-        uses: denoland/setup-deno@v1
+        uses: denoland/setup-deno@v2
         with:
           # Should satisfy the `DENO_VERSION_RANGE` from https://github.com/netlify/edge-bundler/blob/main/node/bridge.ts#L17
-          deno-version: v1
+          deno-version: v2.2.4
       - name: Install
         run: pnpm install
       - name: Build

package.json

@@ -47,10 +47,11 @@
     "fast-glob": "^3.3.2",
     "husky": "^9.0.11",
     "lint-staged": "^15.0.0",
-    "netlify-cli": "^20.1.1",
+    "netlify-cli": "^23.9.5",
     "npm-run-all2": "^6.0.0",
     "p-limit": "^5.0.0",
     "prettier": "^3.0.0",
+    "publint": "^0.3.15",
     "typescript": "^5.0.0",
     "vitest": "^3.0.0"
   },

packages/remix-adapter/package.json

@@ -41,7 +41,8 @@
   "scripts": {
     "prepack": "pnpm run build",
     "build": "tsup-node src/index.ts src/vite/plugin.ts --format esm,cjs --dts --target node16 --clean",
-    "build:watch": "pnpm run build --watch"
+    "build:watch": "pnpm run build --watch",
+    "publint": "publint --strict"
   },
   "repository": {
     "type": "git",

packages/remix-edge-adapter/README.md

@@ -16,12 +16,31 @@ However, if you are using **Remix Vite**, you can instead deploy your existing s
 
 ```js
 // vite.config.js
-import { vitePlugin as remix } from "@remix-run/dev";
-import { netlifyPlugin } from "@netlify/remix-edge-adapter/plugin";
+import { vitePlugin as remix } from '@remix-run/dev'
+import { netlifyPlugin } from '@netlify/remix-edge-adapter/plugin'
 
 export default defineConfig({
-  plugins: [remix(), netlifyPlugin(),
-});
+  plugins: [remix(), netlifyPlugin()],
+})
+```
+
+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 Remix SSR handler, which would otherwise run on all dynamic
+paths:
+
+```js
+// vite.config.js
+import { vitePlugin as remix } from '@remix-run/dev'
+import { netlifyPlugin } from '@netlify/remix-edge-adapter/plugin'
+
+export default defineConfig({
+  plugins: [
+    remix(),
+    netlifyPlugin({
+      excludedPaths: ['/ping', '/api/*', '/webhooks/*'],
+    }),
+  ],
+})
 ```
 
 3. Add an `app/entry.jsx` (.tsx if using TypeScript) with these contents:

packages/remix-edge-adapter/package.json

@@ -43,7 +43,8 @@
     "build": "pnpm run build:src && pnpm run build:types",
     "build:src": "tsup-node src/index.ts src/vite/plugin.ts --format esm,cjs --dts --target node16 --clean",
     "build:types": "deno types > deno.d.ts",
-    "build:watch": "pnpm run build:src --watch"
+    "build:watch": "pnpm run build:src --watch",
+    "publint": "publint --strict"
   },
   "repository": {
     "type": "git",

packages/remix-edge-adapter/src/vite/plugin.ts

@@ -85,7 +85,7 @@ export default createRequestHandler({
 
 // This is written to the edge functions directory. It just re-exports
 // the compiled entrypoint, along with the Netlify function config.
-function generateEdgeFunction(handlerPath: string, exclude: Array<string> = []) {
+function generateEdgeFunction(handlerPath: string, excludedPath: Array<string>) {
   return /* js */ `
     export { default } from "${handlerPath}";
 
@@ -94,7 +94,7 @@ function generateEdgeFunction(handlerPath: string, exclude: Array<string> = [])
       generator: "${name}@${version}",
       cache: "manual",
       path: "/*",
-      excludedPath: ${JSON.stringify(exclude)},
+      excludedPath: ${JSON.stringify(excludedPath)},
     };`
 }
 
@@ -125,7 +125,21 @@ const getEdgeFunctionHandlerModuleId = async (root: string, isHydrogenSite: bool
   return findUserEdgeFunctionHandlerFile(root)
 }
 
-export function netlifyPlugin(): Plugin {
+export interface NetlifyPluginOptions {
+  /**
+   * Paths to exclude from being handled by the Remix handler.
+   *
+   * @IMPORTANT If you have your own Netlify Functions running on custom `path`s, you
+   * must exclude those paths here to avoid conflicts.
+   *
+   * @type {string[]}
+   * @default []
+   */
+  excludedPaths?: string[]
+}
+
+export function netlifyPlugin(options: NetlifyPluginOptions = {}): Plugin {
+  const additionalExcludedPaths = options.excludedPaths ?? []
   let resolvedConfig: ResolvedConfig
   let currentCommand: string
   let isSsr: boolean | undefined
@@ -264,23 +278,25 @@ export function netlifyPlugin(): Plugin {
     async writeBundle() {
       // Write the server entrypoint to the Netlify functions directory
       if (currentCommand === 'build' && isSsr) {
-        const exclude: Array<string> = ['/.netlify/*']
+        const excludedPath: Array<string> = ['/.netlify/*']
         try {
           // Get the client files so we can skip them in the edge function
           const clientDirectory = join(resolvedConfig.build.outDir, '..', 'client')
           const entries = await readdir(clientDirectory, { withFileTypes: true })
           for (const entry of entries) {
             // With directories we don't bother to recurse into it and just skip the whole thing.
             if (entry.isDirectory()) {
-              exclude.push(`/${entry.name}/*`)
+              excludedPath.push(`/${entry.name}/*`)
             } else if (entry.isFile()) {
-              exclude.push(`/${entry.name}`)
+              excludedPath.push(`/${entry.name}`)
             }
           }
         } catch {
           // Ignore if it doesn't exist
         }
 
+        excludedPath.push(...additionalExcludedPaths)
+
         const edgeFunctionsDirectory = join(resolvedConfig.root, NETLIFY_EDGE_FUNCTIONS_DIR)
 
         await mkdir(edgeFunctionsDirectory, { recursive: true })
@@ -290,7 +306,7 @@ export function netlifyPlugin(): Plugin {
 
         await writeFile(
           join(edgeFunctionsDirectory, EDGE_FUNCTION_FILENAME),
-          generateEdgeFunction(relativeHandlerPath, exclude),
+          generateEdgeFunction(relativeHandlerPath, excludedPath),
         )
       }
     },

packages/remix-runtime/package.json

@@ -21,7 +21,8 @@
   "scripts": {
     "prepack": "pnpm run build",
     "build": "tsup-node src/index.ts --format esm,cjs --dts --target node16 --clean",
-    "build:watch": "pnpm run build --watch"
+    "build:watch": "pnpm run build --watch",
+    "publint": "publint --strict"
   },
   "repository": {
     "type": "git",