Skip to content

Commit

Permalink
SvelteKit SSR zip example (#561)
Browse files Browse the repository at this point in the history
* sveltekit ssr sam template

* sveltekit ssr build script

* sveltekit ssr doc

* init node adapter configured sveltekit ssr app

* replace build script with makefile

* add wrapper script

* sam build with make

* doc sam build with make

* include deps

* remove build dir from doc
  • Loading branch information
mxfactorial authored Jan 8, 2025
1 parent 1e8c2cc commit 2868f54
Show file tree
Hide file tree
Showing 17 changed files with 1,969 additions and 0 deletions.
51 changes: 51 additions & 0 deletions examples/sveltekit-ssr-zip/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Sveltekit SSR (Server Side Rendering)

This example shows how to use Lambda Web Adapter to run a [server side rendered Sveltekit](https://svelte.dev/tutorial/kit/ssr) application on the managed nodejs runtime.

### How does it work?

Add the Lambda Web Adapter layer to the function and configure the wrapper script.

1. attach Lambda Adapter layer to your function. This layer containers Lambda Adapter binary and a wrapper script.
1. x86_64: `arn:aws:lambda:${AWS::Region}:753240598075:layer:LambdaAdapterLayerX86:23`
2. arm64: `arn:aws:lambda:${AWS::Region}:753240598075:layer:LambdaAdapterLayerArm64:23`
2. configure Lambda environment variable `AWS_LAMBDA_EXEC_WRAPPER` to `/opt/bootstrap`. This is a wrapper script included in the layer.
3. set function handler to a startup command: `run.sh`. The wrapper script will execute this command to boot up your application.

To get more information of Wrapper script, please read Lambda documentation [here](https://docs.aws.amazon.com/lambda/latest/dg/runtimes-modify.html#runtime-wrapper).

### Create and configure SvelteKit SSR app

\* *this example was created from the steps in this section. repeating them is not required*

1. `npx sv create app`
1. select `SvelteKit minimal` option
1. select `Yes, using Typescript syntax` option
1. repeatedly select enter to complete sveltekit install with default options

1. `cd app` to switch current working directory to newly created `app` directory:
1. `npm install --save-dev @sveltejs/adapter-node` to install sveltekit [node adapter](https://svelte.dev/docs/kit/adapter-node)
1. `npm uninstall @sveltejs/adapter-auto` to remove unused auto adapter
1. replace `import adapter from '@sveltejs/adapter-auto';` with `import adapter from '@sveltejs/adapter-node';` in `svelte.config.js`
1. add a `run.sh` [wrapper](https://docs.aws.amazon.com/lambda/latest/dg/runtimes-modify.html#runtime-wrapper) script:
```sh
cat << EOF > ./run.sh
#!/bin/bash
node index.js
EOF
```
### Build and deploy SSR SvelteKit on Lambda
Run the following commands to build and deploy the application to lambda.
```bash
sam build --use-container
sam deploy --guided
```
When the deployment completes, take note of the SvelteKitSsrFunctionUrlEndpoint output value. This is the function URL.
### Verify it works
Open function's URL in a browser to display the "Welcome to SvelteKit" page.
23 changes: 23 additions & 0 deletions examples/sveltekit-ssr-zip/app/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
node_modules

# Output
.output
.vercel
.netlify
.wrangler
/.svelte-kit
/build

# OS
.DS_Store
Thumbs.db

# Env
.env
.env.*
!.env.example
!.env.test

# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
1 change: 1 addition & 0 deletions examples/sveltekit-ssr-zip/app/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
engine-strict=true
21 changes: 21 additions & 0 deletions examples/sveltekit-ssr-zip/app/Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
BUILD_DIR=${CURDIR}/build

# delete:
# 1. ./build directory created by @sveltejs/adapter-node
# 2. app ./node_modules
clean:
rm -rf ./build
rm -rf ./node_modules

install:
npm install

# build @sveltejs/adapter-node app with prod deps: https://svelte.dev/docs/kit/adapter-node#Deploying
build:
npm run build
cp ./run.sh $(BUILD_DIR)
cp ./package*.json $(BUILD_DIR)
cd $(BUILD_DIR) && npm ci --omit dev

build-SvelteKitSsrFunction: clean install build
cp -r $(BUILD_DIR)/. $(ARTIFACTS_DIR)
38 changes: 38 additions & 0 deletions examples/sveltekit-ssr-zip/app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# sv

Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
Loading

0 comments on commit 2868f54

Please sign in to comment.