sveltekit-adapter-aws
sveltekit-adapter-aws copied to clipboard
Cloudfront behaviours not correct for a default app
When creating a bare bones sveltekit app and adding in the sveltekit-adapter-aws plugin, the deployed cloudfront resource seems to have missing/incorrect routes.
Bug 1 The default sveltekit app (from npm create svelte@latest) has a "sverdle" page. When navigating to the sverdle page fron another page svelte tries to rehydrate and load data from /sverdle/__data.json but the cloudfront deployment has a sverdle/* behaviour that points to the S3 static bucket. The request fails as that url should route to the SSR lambda rather than s3. Removing this sverdle/* behaviour allows the page to work correctly but then the sub-page sverdle/how-to-play results in 404 when loaded directly (works ok when navigated to from another page though). I suspect this is an issue with nested routes in svelte not being handled correctly by this adaptor? maybe more specific behaviour such as sverdle/how-to-play.html should be added instead of a glob?
Bug 2 When first browsing to the FQDN of the cloudfront deployment, the page errors with 404. This is likely because the "default root object" isn't set for the distribution and therefore cloudfront doesn't know what to load when you browse to https://fqdn without any sub path. Manually setting the Default Root Object to index.html seems to fix this but would likely disappear on the next deploy.
To Reproduce Steps to reproduce the behavior:
- npm create svelte@latest my-app
- npm install
- npm install -D sveltekit-adapter-aws
- update svelte.config.js
- npm run build
- browse to root url (404 error)
- navigate to sverdle page (500 error)
- Observe the failed __data.json in chromes network console
Expected behavior I would expect that the instructions on the top level readme for sveltekit-adapter-aws would be able to deploy correctly for an example boilerplate app. If there are additional steps that need to be done to get the app to work then those would be handy to be on the front page. I understand that there are other examples (Basic and Advanced) that are pre-setup but I would hope that it is possible to start from a bare sveltekit project and get it working with the steps on the top level readme.
Screenshots I'll leave my deployment up for a while at https://sveltekit.audiobuzz.org to have a look at
Desktop (please complete the following information):
- OS: MacOS
- Browser: Chrome
- Version Version 108.0.5359.124 (Official Build) (x86_64)
Smartphone (please complete the following information): N/A
Additional context N/A
This is a problem with CloudFront Functions, I have to write a separate hook file and convert it into a CF Functions in the deployment because of this problem, I will try this adapter to see if it converts the hook file to CF Functions, til now I didn't see anything that makes this job automatically.
That "hooks responsibility" of verifying authentication, redirect, and so on, in CloudFront is made by CF Functions.
Good finding @Audiobuzz! Seeing that this open issue is already a bit older, how did you proceed with these open issues?
I read that the cdk, if rootDefaultObject
isn't defined, defaults to index.html
. Looking at the code you see that the rootDefaultObject
is explicitly set to ''
(empty string). Is there any reason behind that? @MikeBild
My new pulumi adapter is tested with the default app, if you want to give it a try.