|
| 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. |
0 commit comments