Sveltekit on AWS (Lambda + Cloudfront + S3)

Sveltekit has a huge list of adapters for building and deploying it . But when we get to AWS there are a couple of adapters to get things right.

If you are just here for deployment of a Sveltekit app , I highly recommend you going with SST. It is a no brainer to get things going. It is really simple and just works.

Amplify might seems like a good option but i had my reasons not to use it.

I previously tried these approaches

sveltekit-adapter-aws

deploying-sveltekit-to-aws-lambda

They didn’t seem to work out for me so i decided to take thing on my own hands . I previously used SST for my deployments . It worked great but i had a very specific requirement which is to run multiple sveltekit apps as a micro service.

ISSUE WITH SST

I would end up with multiple cloudfronts. if i have a configuration which used the micro service approach.

/ -> one sveltekit project with some routes configured

/blogs -> another sveltekit project with base path configured

So using SST could work but i had this issue where i am left with multiple Cloudfront Distros, and i need to do some manual config around things

You can see that the Cf1 and Cf2 are created but not used so i had to do things manually using AWS CDK (or) AWS SDK .

I was actually happy with how SST worked for me and how it handled my Sveltekit Server lambda (where my Svletkit app is served).

Basically SST takes your sveltekit build folder and converts it into a single file using esbuild. and add the prerendered files to the build , then deploys it as a single Lambda function.

Static assets are served via s3 bucket through the cloudfront.

I am trying to replicate the same behaviour but i will take care of all the uploading of assets to s3 and cloudfront configuration , I just want to replicate how SST creates a lambda handler which is capable of running my svletekit app.

So i did my research and reached out to the SST team.

Later on i found a way to replicate their behaviour.

I use SST Sveltekit adapter for generating the build for my Sveltekit app.

Then i use this esbuild config to generate my lambda code .

// build.js
import { build } from 'esbuild';
import * as path from 'path';
import { cp } from 'fs/promises';
await build({
 entryPoints: [path.join('.svelte-kit', 'svelte-kit-sst', 'server', 'lambda-handler', 'index.js')],
 bundle: true,
 platform: 'node',
 target: ['esnext'],
 format: 'esm',
 outExtension: {
  '.js': '.mjs'
 },
 banner: {
  js: [
   `import { createRequire as topLevelCreateRequire } from 'module';`,
   `const require = topLevelCreateRequire(import.meta.url);`
  ].join('')
 },
 outdir: path.join('build')
});
await cp(path.join('.svelte-kit','svelte-kit-sst','prerendered'),path.join('build','prerendered'),{
 recursive:true
});

once you run this file

node build.js

you would typically end up with something like this

The build folder is generated by Esbuild.

Now the process is farely simple from this part.

you just have to zip the build folder and upload it in your lambda

If you do that you will end up with something like this

Now you can generate a Function url for this or even route it through an API gateway or Serve it via a cloudfront (my approach).

Now if you visit the lambda you will see your sveltekit app served , but you will see your static assets failing if you need to configure it via cloudfront.

This is my cloudfront configuration i ended up with which worked out for me , all the _app/ and static files are redirected to a s3 bucket and the ( * )

test and test/* are redirected to lambda functions.

I still highly suggest you to use SST because i am replicating part of its work for higher flexibility and control on how i configure my aws behaviour , If you just need things to work use SST because automating it via SDK/CDK will require more effort and time from you .

For making things even simpler i’ve created an adapter which does it for us

just import from that adapter and import the bundleApp method inorder to build your app properly .

If you don’t wanna use s3 bucket you can use the cdn of your choice by using assets paths

Known Bugs

When uploading static assets to s3 , please make sure that your js files are of correct MIME type if they are not application/javascript , your scripts wont execute .