Skip to content

Commit 2868f54

Browse files
authored
SvelteKit SSR zip example (#561)
* 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
1 parent 1e8c2cc commit 2868f54

17 files changed

+1969
-0
lines changed

examples/sveltekit-ssr-zip/README.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Sveltekit SSR (Server Side Rendering)
2+
3+
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.
4+
5+
### How does it work?
6+
7+
Add the Lambda Web Adapter layer to the function and configure the wrapper script.
8+
9+
1. attach Lambda Adapter layer to your function. This layer containers Lambda Adapter binary and a wrapper script.
10+
1. x86_64: `arn:aws:lambda:${AWS::Region}:753240598075:layer:LambdaAdapterLayerX86:23`
11+
2. arm64: `arn:aws:lambda:${AWS::Region}:753240598075:layer:LambdaAdapterLayerArm64:23`
12+
2. configure Lambda environment variable `AWS_LAMBDA_EXEC_WRAPPER` to `/opt/bootstrap`. This is a wrapper script included in the layer.
13+
3. set function handler to a startup command: `run.sh`. The wrapper script will execute this command to boot up your application.
14+
15+
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).
16+
17+
### Create and configure SvelteKit SSR app
18+
19+
\* *this example was created from the steps in this section. repeating them is not required*
20+
21+
1. `npx sv create app`
22+
1. select `SvelteKit minimal` option
23+
1. select `Yes, using Typescript syntax` option
24+
1. repeatedly select enter to complete sveltekit install with default options
25+
26+
1. `cd app` to switch current working directory to newly created `app` directory:
27+
1. `npm install --save-dev @sveltejs/adapter-node` to install sveltekit [node adapter](https://svelte.dev/docs/kit/adapter-node)
28+
1. `npm uninstall @sveltejs/adapter-auto` to remove unused auto adapter
29+
1. replace `import adapter from '@sveltejs/adapter-auto';` with `import adapter from '@sveltejs/adapter-node';` in `svelte.config.js`
30+
1. add a `run.sh` [wrapper](https://docs.aws.amazon.com/lambda/latest/dg/runtimes-modify.html#runtime-wrapper) script:
31+
```sh
32+
cat << EOF > ./run.sh
33+
#!/bin/bash
34+
35+
node index.js
36+
EOF
37+
```
38+
39+
### Build and deploy SSR SvelteKit on Lambda
40+
41+
Run the following commands to build and deploy the application to lambda.
42+
43+
```bash
44+
sam build --use-container
45+
sam deploy --guided
46+
```
47+
When the deployment completes, take note of the SvelteKitSsrFunctionUrlEndpoint output value. This is the function URL.
48+
49+
### Verify it works
50+
51+
Open function's URL in a browser to display the "Welcome to SvelteKit" page.
+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
node_modules
2+
3+
# Output
4+
.output
5+
.vercel
6+
.netlify
7+
.wrangler
8+
/.svelte-kit
9+
/build
10+
11+
# OS
12+
.DS_Store
13+
Thumbs.db
14+
15+
# Env
16+
.env
17+
.env.*
18+
!.env.example
19+
!.env.test
20+
21+
# Vite
22+
vite.config.js.timestamp-*
23+
vite.config.ts.timestamp-*

examples/sveltekit-ssr-zip/app/.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true
+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
BUILD_DIR=${CURDIR}/build
2+
3+
# delete:
4+
# 1. ./build directory created by @sveltejs/adapter-node
5+
# 2. app ./node_modules
6+
clean:
7+
rm -rf ./build
8+
rm -rf ./node_modules
9+
10+
install:
11+
npm install
12+
13+
# build @sveltejs/adapter-node app with prod deps: https://svelte.dev/docs/kit/adapter-node#Deploying
14+
build:
15+
npm run build
16+
cp ./run.sh $(BUILD_DIR)
17+
cp ./package*.json $(BUILD_DIR)
18+
cd $(BUILD_DIR) && npm ci --omit dev
19+
20+
build-SvelteKitSsrFunction: clean install build
21+
cp -r $(BUILD_DIR)/. $(ARTIFACTS_DIR)
+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# sv
2+
3+
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
4+
5+
## Creating a project
6+
7+
If you're seeing this, you've probably already done this step. Congrats!
8+
9+
```bash
10+
# create a new project in the current directory
11+
npx sv create
12+
13+
# create a new project in my-app
14+
npx sv create my-app
15+
```
16+
17+
## Developing
18+
19+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20+
21+
```bash
22+
npm run dev
23+
24+
# or start the server and open the app in a new browser tab
25+
npm run dev -- --open
26+
```
27+
28+
## Building
29+
30+
To create a production version of your app:
31+
32+
```bash
33+
npm run build
34+
```
35+
36+
You can preview the production build with `npm run preview`.
37+
38+
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

0 commit comments

Comments
 (0)