svelte-adapter-azure-functions Svelte Themes

Svelte Adapter Azure Functions

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

@shellicar/svelte-adapter-azure-functions

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

@shellicar TypeScript Ecosystem

Core Libraries

Build Tools

  • @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

Logging & Monitoring

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

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes