svelte-adapter-azure-swa
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.0 • Public • Published

    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
    					}
    				}
    			}
    		})
    	}
    };

    Install

    npm i svelte-adapter-azure-swa

    DownloadsWeekly Downloads

    629

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    19 kB

    Total Files

    14

    Last publish

    Collaborators

    • geoffrich