svelte-adapter-azure-swa

⚠️ WARNING: this project is considered to be in BETA until SvelteKit is available for general use and the Adapter API is stable. Please report any issues you encounter.

Adapter for Svelte apps that creates an Azure Static Web App, using an Azure function for dynamic server rendering. If your app is purely static, you may be able to use adapter-static instead.

Usage

See the demo repo for an example integration with the SvelteKit demo app.

Run npm install -D svelte-adapter-azure-swa.

Then in your svelte.config.js:

import azure from 'svelte-adapter-azure-swa';

export default {
	kit: {
		...
		adapter: azure()
	}
};

You will need to create an api/ folder in your project root containing a host.json and a package.json (see samples below). The adapter will output the render Azure function for SSR in that folder. The api folder needs to be in your repo so that Azure can recognize the API at build time. However, you can add api/render to your .gitignore so that the generated function is not in source control.

Sample host.json

{
	"version": "2.0",
	"extensionBundle": {
		"id": "Microsoft.Azure.Functions.ExtensionBundle",
		"version": "[2.*, 3.0.0)"
	}
}

Sample package.json

It's okay for this to be empty. Not including it causes the Azure Function build to fail.

{}

Azure configuration

When deploying to Azure, you will need to properly configure your build so that both the static files and API are deployed.

property	value
app_location	./
api_location	api
output_location	build/static

Running locally with the Azure SWA CLI

You can debug using the Azure Static Web Apps CLI. Note that the CLI is currently in preview and you may encounter issues.

To run the CLI, install @azure/static-web-apps-cli and the Azure Functions Core Tools and add a swa-cli.config.json to your project (see sample below). Run npm run build to build your project and swa start to start the emulator. See the CLI docs for more information on usage.

Sample swa-cli.config.json

{
	"configurations": {
		"app": {
			"context": "./build/static",
			"apiLocation": "./api"
		}
	}
}

Options

customStaticWebAppConfig

An object containing additional Azure SWA configuration options. This will be merged with the staticwebapp.config.json generated by the adapter.

Attempting to override the default catch-all route (route: '*') or the navigationFallback options will throw an error, since they are critical for server-side rendering.

Note: customizing this config (especially routes) has the potential to break how SvelteKit handles the request. Make sure to test any modifications thoroughly.

import azure from 'svelte-adapter-azure-swa';

export default {
	kit: {
		...
		adapter: azure({
			customStaticWebAppConfig: {
				routes: [
					{
						route: '/login',
						allowedRoles: ['admin']
					}
				],
				globalHeaders: {
					'X-Content-Type-Options': 'nosniff',
					'X-Frame-Options': 'DENY',
					'Content-Security-Policy': "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'",
				},
				mimeTypes: {
					'.json': 'text/json'
				},
				responseOverrides: {
					'401': {
						'redirect': '/login',
						'statusCode': 302
					}
				}
			}
		})
	}
};