Skip to content
Svelte.Kit

Introduction

@svelte.kit/cdk is an AWS CDK integration that provides a SvelteKit construct to allocate the appropriate resources for an server-side rendered SvelteKit application. The architecture of the deployed infrastructure is showcased below.

SvelteKit AWS architecture diagram, light mode

Getting Started

Install the adapter by running the following command in your terminal:

npm install --save-dev @svelte.kit/cdk

Create a CDK App

It’s completely fine to perform all these stops at the top level of the module. The example encapsulates it in a main function that immediately executes.

import { App, Stack } from 'aws-cdk-lib';
import { SvelteKit } from '@svelte.kit/cdk';

function main() {
	const stackName = `sveltekit-adapter-aws-test`;

	const app = new App({ autoSynth: true });

  const stack = new Stack(app, stackName)

	new SvelteKit(stack, stackName);
}

main();

Build the Project

This package is not responsible for building the project. It expects 2-3 distinct directories to be available in the built contents:

  • lambda
  • s3
  • lambda@edge (optional)

lambda

Should contain the primary Lambda handler function that runs during SSR and API requrests, as well as pre-rendered pages.

s3

Should contain the static assets that are served from S3. e.g. everything in SvelteKit’s app directory.

lambda@edge

Contains a Lambda@Edge function that runs during CloudFront requests to perform redirects to static HTML files in S3.

For example, if a static HTML file is at /about.html in the S3 bucket, and the user requests the /about, /about/index, or /about/index.html routes, the function should correctly rewrite the URL path to /about.html, so it gets redirected by the CloudFront Distribution accordingly.

Run the CDK app

Example commands are demonstrated below. tsx is used as a fast and convenient TypeScript executor. If aws-cdk-lib is installed in the current project, yarn and pnpm can execute it directly. npm still requires npx to execute it.

npx cdk --app 'npx tsx tools/cdk/index.ts' deploy

Configuration

  • out (default: build) - The directory to write the built files to.
  • s3Directory (default: s3) - The directory to upload to S3.
  • lambdaDirectory (default: lambda) - The directory to upload to Lambda.
  • lambdaEdgeDirectory (default: lambda@edge) - The directory to upload to Lambda@Edge.
  • lambdaHandler (default: index.handler) - The name of the Lambda handler function.
  • constructProps (default: {}) - Directly customize/override props provided to the constructs.

TODO

  • (Successfully) read the config from the nearest svelte.config.js to automatically load the config used by @svelte.kit/adapter-aws.

    SvelteKit is setup weird so JITI and module.createRequire can’t read it in their default configuration