Remix Adapter for Azure Functions

Remix Adapter for Azure Functions

An adapter that allows Azure Functions to work as a custom server for Remix.run. This adapter package we have created is designed to be used with Azure Static Web Apps and Azure Functions using the new Node.js v4 programming model.

Usage

The package is available as an npm package and can be installed as follows:

yarn add @scandinavianairlines/remix-azure-functions

Once installed, you can use the adapter in your Azure Functions as follows:

import { app } from '@azure/functions';
import { createRequestHandler } from '@scandinavianairlines/remix-azure-functions';

import * as build from './build/index.js';

app.http('ssr', {
  methods: ['GET', 'POST', 'DELETE', 'HEAD', 'PATCH', 'PUT', 'OPTIONS', 'TRACE', 'CONNECT'],
  authLevel: 'function',
  handler: createRequestHandler({ build }),
});

It is important to note that the Azure Functions runtime will index the handler based on the package.json main property, so make sure that you have set it to the function handler file.

Azure Static Web Apps

When using the adapter with Azure Static Web Apps, you need to make sure that you have set a rewrite route to proxy all request to the Azure Functions. This should be defined in the routes property inside the staticwebapp.config.json file.

{
  "platform": {
    "apiRuntime": "node:18"
  },
  "routes": [
    {
      "route": "/favicon.ico"
    },
    {
      "route": "/build/*"
    },
    {
      "route": "/*",
      "rewrite": "/api/ssr"
    }
  ],
  "navigationFallback": {
    "rewrite": "/api/ssr"
  },
  "trailingSlash": "never"
}

Azure Functions

When using the adapter with Azure Functions, you need to make sure that you have set the route property in your registered HTTP trigger to /{*path}. This is used to know which route to render when using the adapter.

Custom usage

The adapter supports an optional urlParser function that can be used to parse a URL instance from the incoming request. This can be useful if you are using a custom routing solution in your Azure Functions or if you would like to parse the URL from a specific header.

import { createRequestHandler } from '@scandinavianairlines/remix-azure-functions';

import * as build from './build/index.js';

const handler = createRequestHandler({
  build,
  urlParser: request => new URL(request.headers.get('x-forwarded-url')),
});

Examples

In the examples folder you can find a simple example of how to use the adapter with a simple Azure Functions or with Azure Static Web Apps.

Issues

If you encounter any non-security-related bug or unexpected behavior, please file an issue using the bug report template.

Contributing

We welcome contributions to this project. Please read our contributing guidelines.

License

MIT.

Created by the Airline Digitalization Team.

SAS

scandinavianairlines / remix-azure-functions

readme