Svelte + Tauri

# Svelte + Tauri ## Recommended Setup (SPA) Starting out with SPA mode by using `adapter-static` and setting `index.html` as the fallback (this is important to make it go into SPA mode). ## Advanced Setup (SSG with prerendering) Once you know your way around SvelteKit you can start enabling prerendering to improve First Contentful/Meaningful Paint metrics. This can be applied per route or globally if set in the root `+layout.js` file. ## Considerations - Recommend not using server routes (`+server.js`, `+page.server.js`, `+layout.server.js` files) - More information about prerendering for server routes: https://kit.svelte.dev/docs/page-options#prerender-prerendering-server-routes - Always test it in `tauri build` to make sure it works at runtime - If using `[slug]` routing be sure to read https://kit.svelte.dev/docs/page-options#prerender-when-not-to-prerender to understand the limitations - CSP: We're still exploring this. Currently we're recommending to use either the frontend's CSP or Tauri's. We're researching into if they cause conflicts with each other. ## Notes n such What are the current difficulties with using SvelteKit with Tauri? 1. Use Static Adapter - Solve with adapter automatic? - Could this be useful for us to use? https://kit.svelte.dev/docs/adapter-static#zero-config-support - Can you even set the prerender and ssr options in the config? 3. Disable SSR - Solve with adapter config? - Because there is no server in Tauri, it's local-first 5. Set prerender to true - Solve with adapter config? - Because its a static site (`adapter-static`) - Something that could be added to https://kit.svelte.dev/docs/configuration#prerender? - Why does this need to be a separate step if using adapter-static? 7. Can't use `+server` files - Add to notes list, link to SvelteKit docs 9. Conflicting Content Security Policy configuration - https://github.com/tauri-apps/tauri/discussions/6423#discussioncomment-5277253 Reasons to use SvelteKit: - Routing! ## Things to keep in mind - No `+server.js` files - Content Security Policy (CSP) conflicts? Tauri recommends SSG but also supports SPA! You can use either! SSR isn't supported in Tauri (add a link to explanation of why) Ability to set these in the config: ``` export const prerender = true export const ssr = false ``` ## Open Questions - What's the _advised_ config for Tauri's setup? - No SSR (`export const ssr = false`) - With SSR disabled, is the only config difference between SSG and SPA is that you use `fallback: 'index.html'` to use SPA? - By setting `export const prerender = true` does that infer that `ssr = false` for a static adapter? - Does setting `export const ssr = false;` in the root layout require a server? - Yes, if not using `static-adapter`, it's not compatible with Tauri ### SSG - Use `@sveltejs/adapter-static` - `export const prerender = true` - ❓Open question: Can this be exposed as a config option to be set by an adapter? - If `false` then this means you're wanting a SPA (then you set the fallback config variable) ### SPA - Use `@sveltejs/adapter-static` - If using this, is `export const ssr = false` required? I could honestly interpret the docs either way - By using `@sveltejs/adapter-static` does that mean `export const prerender = true` needs to also be explicitly set? - Adapter config: `fallback: '200.html'` ## Tauri Improvements - Saying WHY you choose SSG/SPA for Tauri - Recommend SSG or SPA? Direct to SvelteKit docs for explanations - Have a quick bullet list of limitations with using SSG/SPA vs SSR ## SvelteKit Improvements - Allow adapter configs to specific global prerendering, ssr, etc. ## Fabian-Lars' notes when setting up a new sveltekit app - didn't have to add a +layout.js file using adapter-static with a fallback so far - **✋Lorenzo**: Just double-checking that the resulting built pages aren't the fallback and are the actual expected page, right? - **Fabian**: Well, both? It looks pretty similar to a "normal" SPA app (read as: react app), like everything is in js with a frontend router mounting/unmounting js components. - With prerendering you also get multiple html files (one for each prerendered route?). - `[slug]` routes obviously don't work with prerendering, they do work if you have a fallback set without prerendering anything? - **✋Lorenzo**: Have a read through https://kit.svelte.dev/docs/routing#page-page-js and https://kit.svelte.dev/docs/load#universal-vs-server-when-does-which-load-function-run - **Fabian**: https://kit.svelte.dev/docs/load#universal-vs-server-when-does-which-load-function-run is too confusing for non-svelte pros i think. Had to read it twice to get everything. - **Still me**: https://kit.svelte.dev/docs/routing#page-page-js is better i think, but you have to know what you're looking for i guess? What i mean is, you can post it here to explain the problem/solution for me but that's "too late" if you get what i mean - adding a `+page.server.ts` file to take advantage of the slug route builds fine, but fails _at runtime_ because it can't find some `__data.json` file - **✋Lorenzo**: I don't think you need this, you would use the `load()` function in your `+page.js` file (that gets called at buildtime for pages set to prerender) - **Fabian**: Well, maybe. i'll try that out. But that's kinda the point of the experiment here. I went through the big tutorial thing and this was what made the most sense going from that. I can't even remember seeing the `load()` function anywhere, gonna check... - Checked and still can only spot it in the context of server files - talking about this tutorial btw https://learn.svelte.dev/tutorial/introducing-sveltekit - **pre-review**: - I expected/hoped that adapter-static would cry about the use of `.server` files. - it works if i add `+layout.js` with `prerendering = true` to that route - tldr: you cannot use server files unless that route is prerendered - The question is at what point the server files won't be prerenderable anymore - `export const actions` breaks it - api routes don't work (`+server.js`) no matter the config - They compile fine with prerendering enabled but will fail at runtime - i still dislike file-based routers :)) - i think i'm too much of a react guy to like svelte - Lorenzo hates React and loves Svelte so I'll balance it out ;) - :D ### Adapter Source Code - If no fallback... - If ANY routes have `prerender !== true` (and strict option is true, the default)... - ⛔️ Error listing pages where the routes aren't prerendered - `writeClient()` (don't know exactly what this involves) - `writePrerendered()` - If fallback... - generate fallback pages - Done! ❓But if you DO have a fallback set and don't have `prerender === true`, what do the built pages look like? Are they the fallback page or the actual page?