scandinavianairlines / remix-azure-functions

A Remix.run adapter for Azure Functions and Azure Static Web Apps

Remix Adapter for Azure Functions

• Remix Adapter for Azure Functions
  • Usage
    • Azure Static Web Apps
    • Azure Functions
    • Custom usage
    • Examples
  • Issues
  • Contributing
  • License

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.

remix-azure-functions's Issues

azure-staticwebapp-vite example README typo?

in the readme it is stated: "The above configuration will forward all the requests to the /api/ssr function, which is defined in the server/handler.js file."
in azure-staticwebapp-vite there is not server/handler.js file
also when running the example with yarn dev command, any request to http://localhost:3000/ is returning a 404

[swa]
[swa] Found configuration file:
[swa]   /dev/remix-azure-functions/examples/azure-staticwebapp-vite/public/staticwebapp.config.json
[swa]
[swa]
[swa] Serving static content:
[swa]   /dev/remix-azure-functions/examples/azure-staticwebapp-vite/build/client
[swa]
[swa] Using dev server for API:
[swa]   http://127.0.0.1:3030
[swa]
[swa] Azure Static Web Apps emulator started at http://localhost:3000. Press CTRL+C to exit.
[swa]
[swa]
[2024-04-10T21:07:56.746Z] Host lock lease acquired by instance ID '00000000000000000000000001765947'.
[swa] GET http://127.0.0.1:3030/api/ssr (proxy)
[swa] GET http://localhost:3000/api/ssr - 404

Got error on example Package subpath './lib/adapters/http' is not defined by "exports" from Axios

Introduction

I've tried to run the example from this repository: Remix Azure Functions Example (Commit ref). However, I encountered an issue related to Axios.

Issue Details

When running the example, I encountered the following error:

Package subpath './lib/adapters/http' is not defined by "exports" from Axios

I found a similar issue on the Axios repository: Issue #5263. However, I couldn't locate any direct usage of Axios in the library.

Could you help me identify and resolve this issue?

Tested Versions

I tested the example with the following configurations:

• Node v18.11.0 with bun
• Node v20.16.0 with bun and yarn
• Node v22.0.0 with bun
  The error persists across all tested versions.

Environment

Operating System: macOS M1 Sonoma 14.0

Thank you for your assistance.

[Vite] Function not deploying with Azure SWA

First, thanks for your work on this and for making it available to the public!

We're trying to deploy a Remix Vite app as an Azure Static Web App using your createRequestHandler function and can't quite seem to get it to work (via the Azure SWA CLI). After deploying, static assets are served up properly but it doesn't appear the Azure Function gets created so every other non-static-asset request fails (404). We don't get any related errors during deployment, as far as we can tell.

As a sanity check, we attempted to deploy your non-Vite example SWA project and that is behaving in the exact same way - static assets work, other routes (the Azure Function) do not.

Some questions for you:

1. Should there be some indication in the Azure portal web UI that a function was created and exists within the SWA? The only indication I have right now is when I go to Application Insights, it says App Insights is only applicable to Static Web Apps with at least one function. Add a function to your app to enable App Insights. - which makes me think the function did not get created.
2. What is the appropriate situation for node_modules? We've been trying all these deployments with node_modules in the root of the project and no server/node_modules - but it dawned on us that the deployment may not run npm install once the function code is deployed, meaning the necessary node_modules for the function would not be there at runtime. But if we include server/node_modules, the deployment fails because the API Zip is too big (errors with Reason: The size of the function content was too large. The limit for this Static Web App is 104857600 bytes.).
3. Should this work on the Free hosting plan? Someone said you need to be on the Standard hosting plan for functions to work in an SWA. We tried both, no difference in behavior. Just curious if you know for sure.

Any guidance you could provide would be most appreciated. 🙏

Thank you!

404 Error When Deployed to Azure Static Web App

After fixing the issue in the Remix for Azure Functions example in this PR, I encountered a new problem. When I deployed to Azure Static Web App, I received a 404 error on the root path /.

Steps to Reproduce

1. Copy the project from the example: azure-staticwebapp.
2. Deploy using swa deploy as specified in the package.json file.

Additional Information

I have attached the zip files of the built project before deploying to Azure Static Web App

• api.zip
• app.zip

Could you help resolve this issue?

Thank you!