Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scandinavianairlines/remix-azure-functions
A Remix.run adapter for Azure Functions and Azure Static Web Apps
https://github.com/scandinavianairlines/remix-azure-functions
azure azure-functions azurestaticwebapp react remix-run server-side-rendering serverless
Last synced: 3 months ago
JSON representation
A Remix.run adapter for Azure Functions and Azure Static Web Apps
- Host: GitHub
- URL: https://github.com/scandinavianairlines/remix-azure-functions
- Owner: scandinavianairlines
- License: mit
- Created: 2023-12-11T15:17:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-22T13:56:49.000Z (9 months ago)
- Last Synced: 2024-05-22T14:56:22.333Z (9 months ago)
- Topics: azure, azure-functions, azurestaticwebapp, react, remix-run, server-side-rendering, serverless
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@scandinavianairlines/remix-azure-functions
- Size: 2.08 MB
- Stars: 15
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Remix Adapter for Azure Functions
[](https://github.com/feross/standard) [](https://github.com/prettier/prettier) [](https://www.npmjs.com/package/@scandinavianairlines/remix-azure-functions)
- [Remix Adapter for Azure Functions](#remix-adapter-for-azure-functions)
- [Usage](#usage)
- [Azure Static Web Apps](#azure-static-web-apps)
- [Azure Functions](#azure-functions)
- [Custom usage](#custom-usage)
- [Examples](#examples)
- [Issues](#issues)
- [Contributing](#contributing)
- [License](#license)
An adapter that allows Azure Functions to work as a custom server for [Remix.run][remix]. This adapter package we have created is designed to be used with [Azure Static Web Apps][azure-staticwebapp] and [Azure Functions][azure-functions] using the new [Node.js][nodejs] [**v4 programming model**][model].
## Usage
The package is available as an npm package and can be installed as follows:
```bash
yarn add @scandinavianairlines/remix-azure-functions
```
Once installed, you can use the adapter in your Azure Functions as follows:
```javascript
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.
```json
{
"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.
```javascript
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](./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][bug]
using the bug report template.
[bug]: https://github.com/scandinavianairlines/remix-azure-functions/issues/new?labels=bug
## Contributing
We welcome contributions to this project. Please read our [contributing guidelines](.github/CONTRIBUTING.md).
## License
[MIT](./LICENSE).
---
Created by the [Airline Digitalization Team](mailto:[email protected]).
[azure-functions]: https://learn.microsoft.com/en-us/azure/azure-functions/
[azure-staticwebapp]: https://docs.microsoft.com/en-us/azure/static-web-apps/overview
[nodejs]: https://nodejs.org
[model]: https://techcommunity.microsoft.com/t5/apps-on-azure-blog/azure-functions-node-js-v4-programming-model-is-generally/ba-p/3929217
[remix]: https://remix.run