feat: add @remix-run/netlify-edge package + update Netlify template

.github/workflows/deployments.yml

@@ -258,6 +258,43 @@ jobs:
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.TEST_NETLIFY_TOKEN }}
 
+  netlify_edge_deploy:
+    name: "Netlify Edge Deploy"
+    if: github.repository == 'remix-run/remix'
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: ".nvmrc"
+          cache: npm
+          cache-dependency-path: ./scripts/deployment-test/package.json # no lockfile, key caching off package.json
+
+      # some deployment targets require the latest version of npm
+      # TODO: remove this eventually when the default version we get
+      # is "latest" enough.
+      - name: 📦 Install latest version of npm
+        run: npm install -g npm@latest
+        working-directory: ./scripts/deployment-test
+
+      - name: 📥 Install deployment-test deps
+        run: npm install
+        working-directory: ./scripts/deployment-test
+
+      - name: 🚀 Deploy to Netlify
+        run: node ./netlify.mjs
+        working-directory: ./scripts/deployment-test
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.TEST_NETLIFY_TOKEN }}
+          # required so we can skip the prompt in remix.init
+          USE_NETLIFY_EDGE: 1
+
   vercel_deploy:
     name: "Vercel Deploy"
     if: github.repository == 'remix-run/remix'

.vscode/deno_resolve_npm_imports.json

@@ -8,6 +8,9 @@
   ],
   "imports": {
     "@remix-run/server-runtime": "https://esm.sh/@remix-run/server-runtime@nightly",
+    "@remix-run/deno": "../packages/remix-deno/index.ts",
+    "@remix-run/deno/": "../packages/remix-deno/",
+    "@netlify/edge-functions": "https://edge.netlify.com",
     "mime": "https://esm.sh/mime@3.0.0"
   }
 }

package.json

@@ -14,6 +14,7 @@
     "packages/remix-eslint-config",
     "packages/remix-express",
     "packages/remix-netlify",
+    "packages/remix-netlify-edge",
     "packages/remix-node",
     "packages/remix-react",
     "packages/remix-serve",

packages/remix-deno/index.ts

@@ -14,6 +14,7 @@ export {
 } from "./implementations.ts";
 
 export {
+  createRequestHandler as createRemixRequestHandler,
   createSession,
   isCookie,
   isSession,

packages/remix-dev/config.ts

@@ -22,7 +22,6 @@ export type RemixMdxConfigFunction = (
 export type ServerBuildTarget =
   | "node-cjs"
   | "arc"
-  | "netlify"
   | "vercel"
   | "cloudflare-pages"
   | "cloudflare-workers"
@@ -371,9 +370,6 @@ export async function readConfig(
     case "cloudflare-pages":
       serverBuildPath = "functions/[[path]].js";
       break;
-    case "netlify":
-      serverBuildPath = ".netlify/functions-internal/server.js";
-      break;
     case "vercel":
       serverBuildPath = "api/index.js";
       break;

packages/remix-netlify-edge/README.md

@@ -0,0 +1,13 @@
+# Welcome to Remix!
+
+[Remix](https://remix.run) is a web framework that helps you build better websites with React.
+
+To get started, open a new shell and run:
+
+```sh
+npx create-remix@latest
+```
+
+Then follow the prompts you see in your terminal.
+
+For more information about Remix, [visit remix.run](https://remix.run)!

packages/remix-netlify-edge/globals.ts

@@ -0,0 +1,4 @@
+import "@remix-run/deno/globals.ts";
+
+// @ts-ignore
+globalThis.process ||= { env: Deno.env.toObject() };

packages/remix-netlify-edge/index.ts

@@ -0,0 +1,4 @@
+import "./globals.ts";
+
+export type { GetLoadContextFunction, RequestHandler } from "./server.ts";
+export { createRequestHandler } from "./server.ts";

packages/remix-netlify-edge/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@remix-run/netlify-edge",
+  "description": "Netlify Edge server request handler for Remix",
+  "version": "1.8.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/remix-run/remix",
+    "directory": "packages/remix-netlify-edge"
+  },
+  "bugs": {
+    "url": "https://github.com/remix-run/remix/issues"
+  },
+  "dependencies": {
+    "@remix-run/deno": "1.8.0"
+  },
+  "devDependencies": {
+    "@netlify/edge-functions": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@netlify/edge-functions": "^2.0.0"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "files": [
+    "dist/",
+    "CHANGELOG.md",
+    "LICENSE.md",
+    "README.md"
+  ]
+}

packages/remix-netlify-edge/rollup.config.js

@@ -0,0 +1,6 @@
+const { getAdapterConfig } = require("../../rollup.utils");
+
+/** @returns {import("rollup").RollupOptions[]} */
+module.exports = function rollup() {
+  return [getAdapterConfig("netlify-edge")];
+};

packages/remix-netlify-edge/server.ts

@@ -0,0 +1,66 @@
+import { createRemixRequestHandler } from "@remix-run/deno";
+import type { AppLoadContext, ServerBuild } from "@remix-run/deno";
+import type { Context } from "@netlify/edge-functions";
+
+type LoadContext = AppLoadContext & Context;
+
+/**
+ * A function that returns the value to use as `context` in route `loader` and
+ * `action` functions.
+ *
+ * You can think of this as an escape hatch that allows you to pass
+ * environment/platform-specific values through to your loader/action.
+ */
+export type GetLoadContextFunction = (
+  request: Request,
+  context: Context
+) => Promise<LoadContext> | LoadContext;
+
+export type RequestHandler = (
+  request: Request,
+  context: LoadContext
+) => Promise<Response | void>;
+
+export function createRequestHandler({
+  build,
+  mode,
+  getLoadContext,
+}: {
+  build: ServerBuild;
+  mode?: string;
+  getLoadContext?: GetLoadContextFunction;
+}): RequestHandler {
+  let remixHandler = createRemixRequestHandler(build, mode);
+
+  let assetPath = build.assets.url.split("/").slice(0, -1).join("/");
+
+  return async (
+    request: Request,
+    context: LoadContext
+  ): Promise<Response | void> => {
+    let { pathname } = new URL(request.url);
+    // Skip the handler for static files
+    if (pathname.startsWith(`${assetPath}/`)) {
+      return;
+    }
+    try {
+      let loadContext = (await getLoadContext?.(request, context)) || context;
+
+      let response = await remixHandler(request, loadContext);
+      if (response.status === 404) {
+        // Check if there is a matching static file
+        let originResponse = await context.next({
+          sendConditionalRequest: true,
+        });
+        if (originResponse.status !== 404) {
+          return originResponse;
+        }
+      }
+      return response;
+    } catch (error: unknown) {
+      console.error(error);
+
+      return new Response("Internal Error", { status: 500 });
+    }
+  };
+}

packages/remix-netlify-edge/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    "lib": ["ES2019", "WebWorker"],
+    "target": "ES2019",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "../../build/node_modules/@remix-run/netlify-edge",
+    "rootDir": ".",
+    // Avoid naming conflicts between history and react-router-dom relying on
+    // lib.dom.d.ts Window and this being a WebWorker env.
+    "skipLibCheck": true
+  }
+}

rollup.utils.js

@@ -435,7 +435,7 @@ module.exports = {
 
 /**
  * @typedef {Record<string, { values?: string[]; types?: string[] }>} MagicExports
- * @typedef {"architect" | "cloudflare-pages" | "cloudflare-workers" | "express" | "netlify" | "vercel"} RemixAdapter
+ * @typedef {"architect" | "cloudflare-pages" | "cloudflare-workers" | "express" | "netlify" | "netlify-edge" | "vercel"} RemixAdapter
  * @typedef {"cloudflare" | "node" | "deno"} RemixRuntime
  * @typedef {`@remix-run/${RemixAdapter | RemixRuntime | "dev" | "eslint-config" | "react" | "serve" | "server-runtime"}`} ScopedRemixPackage
  * @typedef {"create-remix" | "remix" | ScopedRemixPackage} RemixPackage

scripts/build.mjs

@@ -14,7 +14,7 @@ exec("yarn", ["rollup", "-c"])
       exec("deno", [
         "check",
         "--import-map=.vscode/deno_resolve_npm_imports.json",
-        ...glob.sync("packages/remix-deno/**/*.ts"),
+        ...glob.sync("packages/{remix-deno,remix-netlify-edge}/**/*.ts"),
       ])
   )
   .then(() => publish && exec("node", ["scripts/copy-build-to-dist.mjs"]))

scripts/deployment-test/netlify.mjs

@@ -5,6 +5,7 @@ import fse from "fs-extra";
 import { createApp } from "@remix-run/dev";
 import PackageJson from "@npmcli/package-json";
 
+import netlifyRemixInit from "../../templates/netlify/remix.init/index.js";
 import {
   addCypress,
   CYPRESS_CONFIG,
@@ -16,6 +17,8 @@ import {
   validatePackageVersions,
 } from "./_shared.mjs";
 
+const { USE_NETLIFY_EDGE } = process.env;
+
 let APP_NAME = getAppName("netlify");
 let PROJECT_DIR = getAppDirectory(APP_NAME);
 let CYPRESS_DEV_URL = "http://localhost:3000";
@@ -27,6 +30,12 @@ async function createNewApp() {
     useTypeScript: true,
     projectDir: PROJECT_DIR,
   });
+
+  // In conjunction with USE_NETLIFY_EDGE we explicitly call remix init
+  // to create the edge version of the app
+  if (USE_NETLIFY_EDGE) {
+    await netlifyRemixInit({ rootDirectory: PROJECT_DIR });
+  }
 }
 
 let client = new NetlifyAPI(process.env.NETLIFY_AUTH_TOKEN);

scripts/utils.js

@@ -13,6 +13,7 @@ let remixPackages = {
     "cloudflare-pages",
     "cloudflare-workers",
     "express",
+    "netlify-edge",
     "netlify",
     "vercel",
   ],

templates/netlify/.gitignore

@@ -2,5 +2,7 @@ node_modules
 
 /.cache
 /public/build
-/.netlify
 .env
+
+# Local Netlify folder
+.netlify

templates/netlify/README.md

@@ -1,7 +1,7 @@
 # Welcome to Remix!
 
 - [Remix Docs](https://remix.run/docs)
-- [Netlify Functions](https://www.netlify.com/products/functions/)
+- [Netlify Functions Overview](https://docs.netlify.com/functions/overview)
 
 ## Netlify Setup
 
@@ -34,7 +34,7 @@ netlify init
 The Remix dev server starts your app in development mode, rebuilding assets on file changes. To start the Remix dev server:
 
 ```sh
-npm run dev
+netlify dev
 ```
 
 Open up [http://localhost:3000](http://localhost:3000), and you should be ready to go!
@@ -51,7 +51,7 @@ Note: When running the Netlify CLI, file changes will rebuild assets, but you wi
 
 ## Deployment
 
-There are two ways to deploy your app to Netlify, you can either link your app to your git repo and have it auto deploy changes to Netlify, or you can deploy your app manually. If you've followed the setup instructions already, all you need to do is run this:
+There are two ways to deploy your app to Netlify, you can either link your app to your git repository and have it auto deploy changes to Netlify, or you can deploy your app manually. If you've followed the setup instructions already, all you need to do is run this:
 
 ```sh
 # preview deployment

templates/netlify/netlify.toml

@@ -1,17 +1,14 @@
 [build]
-  command = "remix build"
-  publish = "public"
-
-[dev]
-  command = "remix watch"
-  port = 3000
+command = "remix build"
+publish = "public"
 
 [[redirects]]
-  from = "/*"
-  to = "/.netlify/functions/server"
-  status = 200
+from = "/*"
+to = "/.netlify/functions/server"
+status = 200
 
 [[headers]]
-  for = "/build/*"
-  [headers.values]
-    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"
+for = "/build/*"
+
+[headers.values]
+"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

templates/netlify/remix.config.js

@@ -1,13 +1,12 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
-  serverBuildTarget: "netlify",
   server:
     process.env.NETLIFY || process.env.NETLIFY_LOCAL
       ? "./server.js"
       : undefined,
   ignoredRouteFiles: ["**/.*"],
+  serverBuildPath: ".netlify/functions-internal/server.js",
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: ".netlify/functions-internal/server.js",
   // publicPath: "/build/",
 };