Host static site using CloudFront

[hammady]

Determine paths to cache.

[hammady]

@fayez-nazzal please explain the role for each generated file and suggest files that can be safely deleted.

[hammady]

Also we should only cache the immutable folder, right?

[fayez-nazzal]

@hammady

The generator output is taken from SvelteKit's static adapter. We are currently passing default options. There is also support for separating assets or compressing them with brotli and gzip, but it's irrelevant at the moment.

The build directory is minimal. Let me explain it ( I copied some content here from one of my blog drafts ):

If you expand the content of the build directory, you will get a filesystem tree similar to the following:

 ├── _app
 │   ├── immutable
 │   │   ├── assets
 │   │   │   ├── [..].css
 │   │   ├── chunks
 │   │   │   ├── [..].js
 │   │   ├── entry
 │   │   │   ├── [..].js
 │   │   └── nodes
 │   │       ├── [..].js
 ├── favicon.png
 ├── index.html
 ├── __data.json
 ├── other_route_example.html
 ├── other_route_example
           └── __data.json

Our whole app turned into HTML, CSS, JavaScript, and a few JSON files storing already fetched data. No trace of a single Nodejs function!

• _app/immutable: Contains static files that will likely never change. It has a set of compiled JavaScript and CSS files, which is why they are cached for 1 year, They are fingerprinted for you so you can update your app without worrying about caching issues.
• For each route in our app, we have a generated HTML file and data JSON. For the root route /, we have the index.html and __data.json, and for each other route, we will have them as [route_name].html and [route_name]/__data.json. Those JSON files are simply the data generated by each route load function. It's the static data being generated once at build time.
• We will also have our static assets in the same directory, for example, the favicon or any other image file. If you feel confident that those will never change, you can cache them. Otherwise, you can serve them using vite, this way, they will go over the _app/immutable file and be fingerprinted.

[hammady]

I have modified the generator code in 615085fc5c38fc8d5dea59c6387709501cbf516f to only copy index.html, favicon.png and _app to the destination folder. I don't think others are needed after the static generation. I viewed the source of the HTML to double check.

[hammady]

Also caching will be handled by CloudFront.

[fayez-nazzal]

@hammady The content of __data.json files is integrated into the HTML file in the last stages of the build process. I think it's safe to omit it. The only concern is that we may have more routes (and possibly static files) as we move on. How are we going to handle this?

[hammady]

YAGNI.