feat: add @remix-run/azure-functions package

contributors.yml

@@ -1,3 +1,4 @@
+- aaronpowell
 - aaronpowell96
 - aaronshaf
 - abereghici

docs/guides/deployment.md

@@ -18,6 +18,7 @@ npx create-remix@latest
   Fly.io
   Netlify
   Vercel
+  Azure Static Web Apps
 ```
 
 Each target has unique file structures, configuration files, cli commands that need to be run, server environment variables to be set etc. Because of this, it's important to read the README.md to deploy the app. It's got all of the steps you need to take to get your app live within minutes.

docs/other-api/adapter.md

@@ -8,6 +8,7 @@ order: 2
 Idiomatic Remix apps can generally be deployed anywhere because Remix adapt's the server's request/response to the [Web Fetch API][web-fetch-api]. It does this through adapters. We maintain a few adapters:
 
 - `@remix-run/architect`
+- `@remix-run/azure-functions`
 - `@remix-run/cloudflare-pages`
 - `@remix-run/cloudflare-workers`
 - `@remix-run/express`

jest.config.js

@@ -14,10 +14,11 @@ module.exports = {
     "packages/remix-node",
     "packages/remix-react",
     "packages/remix-server-runtime",
+    "packages/remix-azure-functions",
   ],
   watchPlugins: [
     require.resolve("jest-watch-select-projects"),
     require.resolve("jest-watch-typeahead/filename"),
     require.resolve("jest-watch-typeahead/testname"),
   ],
-};
+};

package.json

@@ -6,6 +6,7 @@
     "packages/create-remix",
     "packages/remix",
     "packages/remix-architect",
+    "packages/remix-azure-functions",
     "packages/remix-cloudflare",
     "packages/remix-cloudflare-pages",
     "packages/remix-cloudflare-workers",

packages/remix-azure-functions/README.md

@@ -0,0 +1,17 @@
+# 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)!
+
+## About
+
+This package can be used to host Remix within an [Azure Function](https://docs.microsoft.com/azure/azure-functions/) or in [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps) (using the built-in Azure Functions support).

packages/remix-azure-functions/__tests__/server-test.ts

@@ -0,0 +1,269 @@
+import type { Context, HttpRequest } from "@azure/functions";
+import {
+  createRequestHandler as createRemixRequestHandler,
+} from "@remix-run/node";
+
+import {
+  createRemixHeaders,
+  createRemixRequest,
+  createRequestHandler,
+} from "../server";
+
+// We don't want to test that the remix server works here (that's what the
+// puppetteer tests do), we just want to test the express adapter
+jest.mock("@remix-run/node", () => {
+  let original = jest.requireActual("@remix-run/node");
+  return {
+    ...original,
+    createRequestHandler: jest.fn(),
+  };
+});
+
+let mockedCreateRequestHandler =
+  createRemixRequestHandler as jest.MockedFunction<
+    typeof createRemixRequestHandler
+  >;
+
+describe("azure createRequestHandler", () => {
+  let context: Context;
+
+  beforeEach(() => {
+    context = { log: jest.fn() } as unknown as Context;
+  });
+
+  describe("basic requests", () => {
+    afterEach(() => {
+      mockedCreateRequestHandler.mockReset();
+    });
+
+    afterAll(() => {
+      jest.restoreAllMocks();
+    });
+
+    it("handles requests", async () => {
+      mockedCreateRequestHandler.mockImplementation(() => async (req) => {
+        return new Response(`URL: ${new URL(req.url).pathname}`);
+      });
+
+      let mockedRequest: HttpRequest = {
+        method: "GET",
+        url: "/foo/bar",
+        rawBody: "",
+        headers: {
+          "x-ms-original-url": "http://localhost:3000/foo/bar",
+        },
+        params: {},
+        query: {},
+        body: "",
+      };
+
+      let res = await createRequestHandler({ build: undefined })(
+        context,
+        mockedRequest
+      );
+
+      expect(res.status).toBe(200);
+      expect(res.body).toBe("URL: /foo/bar");
+    });
+
+    it("handles status codes", async () => {
+      mockedCreateRequestHandler.mockImplementation(() => async () => {
+        return new Response (null, { status: 204 });
+      });
+
+      let mockedRequest: HttpRequest = {
+        method: "GET",
+        url: "/foo/bar",
+        rawBody: "",
+        headers: {
+          "x-ms-original-url": "http://localhost:3000/foo/bar",
+        },
+        params: {},
+        query: {},
+        body: "",
+      };
+
+      let res = await createRequestHandler({ build: undefined })(
+        context,
+        mockedRequest
+      );
+
+      expect(res.status).toBe(204);
+    });
+
+    it("sets headers", async () => {
+      mockedCreateRequestHandler.mockImplementation(() => async (req) => {
+        let headers = new Headers({ "X-Time-Of-Year": "most wonderful" });
+        headers.append(
+          "Set-Cookie",
+          "first=one; Expires=0; Path=/; HttpOnly; Secure; SameSite=Lax"
+        );
+        headers.append(
+          "Set-Cookie",
+          "second=two; MaxAge=1209600; Path=/; HttpOnly; Secure; SameSite=Lax"
+        );
+        headers.append(
+          "Set-Cookie",
+          "third=three; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Path=/; HttpOnly; Secure; SameSite=Lax"
+        );
+        for(let [key, value] of req.headers.entries()) {
+          headers.set(key, value);
+        }
+        return new Response (null, { headers });
+      });
+
+      let mockedRequest: HttpRequest = {
+        method: "GET",
+        url: "/foo/bar",
+        rawBody: "",
+        headers: {
+          "x-ms-original-url": "http://localhost:3000/foo/bar",
+        },
+        params: {},
+        query: {},
+        body: "",
+      };
+
+      let res = await createRequestHandler({ build: undefined })(
+        context,
+        mockedRequest
+      );
+
+      expect(res.headers["x-ms-original-url"]).toEqual(["http://localhost:3000/foo/bar"]);
+      expect(res.headers["X-Time-Of-Year"]).toEqual(["most wonderful"]);
+      expect(res.headers["Set-Cookie"]).toEqual([
+        "first=one; Expires=0; Path=/; HttpOnly; Secure; SameSite=Lax",
+        "second=two; MaxAge=1209600; Path=/; HttpOnly; Secure; SameSite=Lax",
+        "third=three; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Path=/; HttpOnly; Secure; SameSite=Lax",
+      ]);
+    });
+  });
+});
+
+describe("azure createRemixHeaders", () => {
+  describe("creates fetch headers from azure headers", () => {
+    it("handles empty headers", () => {
+      expect(createRemixHeaders({})).toMatchInlineSnapshot(`
+        Headers {
+          Symbol(map): Object {},
+        }
+      `);
+    });
+
+    it("handles simple headers", () => {
+      expect(createRemixHeaders({ "x-foo": "bar" })).toMatchInlineSnapshot(`
+        Headers {
+          Symbol(map): Object {
+            "x-foo": Array [
+              "bar",
+            ],
+          },
+        }
+      `);
+    });
+
+    it("handles multiple headers", () => {
+      expect(createRemixHeaders({ "x-foo": "bar", "x-bar": "baz" }))
+        .toMatchInlineSnapshot(`
+        Headers {
+          Symbol(map): Object {
+            "x-bar": Array [
+              "baz",
+            ],
+            "x-foo": Array [
+              "bar",
+            ],
+          },
+        }
+      `);
+    });
+
+    it("handles headers with multiple values", () => {
+      expect(createRemixHeaders({ "x-foo": "bar, baz" }))
+        .toMatchInlineSnapshot(`
+        Headers {
+          Symbol(map): Object {
+            "x-foo": Array [
+              "bar, baz",
+            ],
+          },
+        }
+      `);
+    });
+
+    it("handles headers with multiple values and multiple headers", () => {
+      expect(createRemixHeaders({ "x-foo": "bar, baz", "x-bar": "baz" }))
+        .toMatchInlineSnapshot(`
+        Headers {
+          Symbol(map): Object {
+            "x-bar": Array [
+              "baz",
+            ],
+            "x-foo": Array [
+              "bar, baz",
+            ],
+          },
+        }
+      `);
+    });
+  });
+});
+
+describe("azure createRemixRequest", () => {
+  it("creates a request with the correct headers", async () => {
+    let request: HttpRequest = {
+      method: "GET",
+      url: "/foo/bar",
+      rawBody: "",
+      headers: {
+        "x-ms-original-url": "http://localhost:3000/foo/bar",
+      },
+      params: {},
+      query: {},
+      body: "",
+    };
+
+    expect(createRemixRequest(request)).toMatchInlineSnapshot(`
+      NodeRequest {
+        "abortController": undefined,
+        "agent": undefined,
+        "compress": true,
+        "counter": 0,
+        "follow": 20,
+        "size": 0,
+        "timeout": 0,
+        Symbol(Body internals): Object {
+          "body": null,
+          "disturbed": false,
+          "error": null,
+        },
+        Symbol(Request internals): Object {
+          "headers": Headers {
+            Symbol(map): Object {
+              "x-ms-original-url": Array [
+                "http://localhost:3000/foo/bar",
+              ],
+            },
+          },
+          "method": "GET",
+          "parsedURL": Url {
+            "auth": null,
+            "hash": null,
+            "host": "localhost:3000",
+            "hostname": "localhost",
+            "href": "http://localhost:3000/foo/bar",
+            "path": "/foo/bar",
+            "pathname": "/foo/bar",
+            "port": "3000",
+            "protocol": "http:",
+            "query": null,
+            "search": null,
+            "slashes": true,
+          },
+          "redirect": "follow",
+          "signal": null,
+        },
+      }
+    `);
+  });
+});

packages/remix-azure-functions/__tests__/setup.ts

@@ -0,0 +1,2 @@
+import { installGlobals } from "@remix-run/node";
+installGlobals();

packages/remix-azure-functions/globals.ts

@@ -0,0 +1,2 @@
+import { installGlobals } from "@remix-run/node";
+installGlobals();

packages/remix-azure-functions/index.ts

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

packages/remix-azure-functions/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('@jest/types').Config.InitialOptions} */
+module.exports = {
+  ...require("../../jest/jest.config.shared"),
+  displayName: "azure-functions",
+};

packages/remix-azure-functions/magicExports/remix.ts

@@ -0,0 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+// Re-export everything from this package that is available in `remix`.
+
+export {
+  RequestHandler,
+  createRequestHandler,
+  GetLoadContextFunction,
+} from "@remix-run/azure-functions";

packages/remix-azure-functions/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@remix-run/azure-functions",
+  "version": "1.6.8",
+  "description": "Azure Functions server request handler for Remix",
+  "bugs": {
+    "url": "https://github.com/remix-run/remix/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/remix-run/remix",
+    "directory": "packages/remix-azure-functions"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@remix-run/node": "1.6.8"
+  },
+  "devDependencies": {
+    "@azure/functions": "^3.2.0",
+    "@types/supertest": "^2.0.12",
+    "node-mocks-http": "^1.11.0",
+    "supertest": "^6.2.4"
+  },
+  "peerDependencies": {
+    "@azure/functions": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}

packages/remix-azure-functions/rollup.config.js

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