🛑 IMPORTANT: due to breaking changes to the adapter API introduced by SvelteKit next-208, this adapter will only work with SvelteKit versions up to next-206. You can track the work to support the latest SvelteKit version in this issue. For now, you will need to manually pin to a supported version to use this adapter. See this comment for more details.
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.
Azure Static Web Apps require an index.html
file to be present in your build output folder, so you need to prerender your root index.svelte
route to use this adapter.
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
(see sample 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.
{
"version": "2.0",
"extensionBundle": {
"id": "Microsoft.Azure.Functions.ExtensionBundle",
"version": "[2.*, 3.0.0)"
}
}
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 |
Local SWA debugging is currently broken due to the following SWA CLI issues: 261 and 286
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 add a swa-cli.config.json
to your project (see sample below). Run swa start
to start the emulator. See the CLI docs for more information on usage.
{
"configurations": {
"app": {
"context": "./build/static",
"apiLocation": "./api"
}
}
}
As an escape hatch, you may optionally specify a function which will receive the final esbuild options generated by this adapter and returns a modified esbuild configuration. The result of this function will be passed as-is to esbuild. The function can be async.
For example, you may wish to add a plugin:
adapterVercel({
esbuild(defaultOptions) {
return {
...defaultOptions,
plugins: []
};
}
});