@shellicar/svelte-adapter-azure-functions

A SvelteKit adapter that builds your app into an Azure Function.

@shellicar TypeScript Ecosystem

Core Libraries

• @shellicar/core-config - A library for securely handling sensitive configuration values like connection strings, URLs, and secrets.
• @shellicar/core-di - A basic dependency injection library.

Reference Architectures

• @shellicar/reference-foundation - A comprehensive starter repository. Illustrates individual concepts.
• @shellicar/reference-enterprise - A comprehensive starter repository. Can be used as the basis for creating a new Azure application workload.

Build Tools

• @shellicar/build-clean - Build plugin that automatically cleans unused files from output directories.
• @shellicar/build-version - Build plugin that calculates and exposes version information through a virtual module import.
• @shellicar/build-graphql - Build plugin that loads GraphQL files and makes them available through a virtual module import.

Framework Adapters

• @shellicar/svelte-adapter-azure-functions - A SvelteKit adapter that builds your app into an Azure Function.
• @shellicar/cosmos-query-builder - Helper class for type safe advanced queries for Cosmos DB (Sql Core).

Logging & Monitoring

• @shellicar/winston-azure-application-insights - An Azure Application Insights transport for Winston logging library.
• @shellicar/pino-applicationinsights-transport - Azure Application Insights transport for pino

Motivation

Looking at the available SvelteKit adapters, there's one for Node.js and a community adapter for Azure Static Web Apps. I wanted to deploy to Azure Functions, so I created this adapter.

Implementation

The adapter generates a single Azure Function:

app.http('server', {
  handler,
  route: '{*url}',
  methods: ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'PATCH', 'POST', 'PUT']
});

Usage

pnpm add -D @shellicar/svelte-adapter-azure-functions

In svelte.config.js:

import adapter from '@shellicar/svelte-adapter-azure-functions';

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

Configuration

esbuildOptions

adapter({
  esbuildOptions: {
    minify: false
  }
})

Default options in defaults.ts:

export const defaults = {
  bundle: true,
  platform: 'node',
  target: 'node20',
  format: 'esm',
  // ...see defaults.ts for full options
};

Function authLevel

The trigger uses the following code, and the authLevel can be changed using the SERVER_AUTH_LEVEL environment variable.

import { app } from '@azure/functions';
import { handler } from './handler';

const getAuthLevel = (level: string | undefined) => {
  switch(level) {
    case 'function':
      return 'function';
    case 'admin':
      return 'admin';
    case 'anonymous':
      return 'anonymous';
  }
  return 'anonymous';
};

app.http('server', {
  handler,
  authLevel: getAuthLevel(process.env.SERVER_AUTH_LEVEL),
  route: '{*url}',
  methods: ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'PATCH', 'POST', 'PUT'],
});

Credits

• svelte-adapter-azure-swa
• esbuild-azure-functions