Svelte Adapter Azure Functions

shellicar

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

Download

@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.
@shellicar/core-foundation - A comprehensive starter repository.

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

@shellicar/svelte-adapter-azure-functions - A SvelteKit adapter that builds your app into an Azure Function.

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

Top categories