Closed Lottike closed 2 years ago
Hi @Lottike, Thanks for your interest! You could certainly integrate this repo into your existing solution, in fact, I use a setup very similar to yours to host a very simple blog. I'm not sure of your particular circumstance, but here are a few things I would consider;
If neither of these things concern you then I can highly recommend Svelte, it's a really clean, efficient framework.
As for static assets, these really fall into three categories, public files (like any images, fonts, etc), pre-rendered pages (these are static pages that you designate that are rendered as compile-time), and files generated by SvelteKit at build time, these are used to make your site isomorphic, basically, the server renders the first page you visit, but then when a user clicks around your site all subsequent pages are client-side rendered. As for what files specifically, after the build process any files in ./build/assets/
or ./build/prerendered/
should be hosted in S3.
You also mentioned doing the SSR in a lambda@edge, you certainly could as this will improve response time and I thought about this but decided against this for this adapter because;
@yarbsemaj, Thank you for your detailed reply and advice! I really appreciate it.
I've already chosen SvelteKit for my project. The concerns you mentioned are valid, but they don't really worry me. You are also right about lambda@edge. I should reconsider it's role in my project.
I'm really new to the dev world so I'm basically trying to figure out how things work. Here is a test I ran with your adapter:
Firstly, I cloned the example SvelteKit app, by selecting "No" to all the options. Then I followed your instructions to set up your adapter, but some things came up:
svelte.config.js
and your instructions refer to a svelte.config.cjs
file. Don't know why the difference is, but thought I should let you knownpm audit -fix --force
because some warnings were coming uptarget: '#svelte',
export default config;
at the end of the filenpm i svelte-preprocess
as it was not pre-installednpm run build
and it seems to have worked, but the following warning popped up:> build/app.js:657:14: warning: This dynamic import will not be bundled because the argument is not a string literal (use "import().catch()" to silence this warning) 657 │ csp_ready = import(name).then((crypto2) => {
The build created the following folders and files in the root directory: assets, chunks, entries, nodes, server, manifest.js, manifest.json
I followed your advice and uploaded the static files from assets to an S3 bucket. Then I hosted it as a static website to test what works, and as expected, the static pages show up, but the todos functionality doesn't work, but the page layout loads.
Also, I checked out the serverless.yml
file you've provided, to get a better understanding of the infrastructure, but there are a few things that I don't seem to be able to figure out.
As far as I can see it creates and the following resources:
build/edge/router.handler
file or even such a directory what will it be filled in with? Another copy of the server directory or something?This gives me a better understanding of the general infrastructure, but leaves me with a couple of important questions:
context=module load()
functions to verify an JWT for example before allowing the user to see the page and redirecting them to a login page if the token has expired (or if it isn't present in a cookie)? Any input would be highly appreciated.
Sorry if some of the details were trivial or useless, but I'm really new and learning, and I thought it might be useful to someone if they were addressed, as there is not much information on the web for this kind of thing atm.
Thank you.
@Lottike Thank You for spotting my typo on svelte.config.cjs will publish a fix for that now. :) I think the issue around the npm audit are to do with outdated packages that come as part of serverless plugins, as your running this build process away from users that shouldn't be an issue. svelte-preprocess i believe is added to your config is you choose to enable typescript buts it's handy to have for other bits as well.
Your dissection of the serverless.yml file is correct. As for the edge function, the way serverless packages up your app is it makes a zip of all your function code, limited by your package config, it then uses that zip as the basis for all functions, with only the entry point been different.
As for your questions;
Hi!
I already have an app that is distributed via CloudFront (from a static S3 bucket). I mostly get data from an API Gateway / Lambda + DynamoDB backend and I format the responses with some javascript on the client side.
But it turns out I'll need some extra server-side rendering functionality. I'm looking if I could use your project in my solution. I already have a set up CI/CD environment, so I'm basically asking how can I figure out which files should go into an S3 bucket and if you have any idea how to set up the SSR via Lambda or Lambda@Edge?
Or is there another solution you'd recommend?
Thanks.