-
Notifications
You must be signed in to change notification settings - Fork 126
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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
1 parent
1e8c2cc
commit 2868f54
Showing
17 changed files
with
1,969 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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-* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
engine-strict=true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Oops, something went wrong.