# SvelteKit Guide

## Next Steps

- What's the Cool Thing we show off for JS peeps? Notifications?
- They're visual
- Easy to do (eh permissions)
- Appeal to JS and beginner persona
- Do we care about the output of this guide _looking_ the same as CTA? Styles, etc.
- How could we include mobile in this? Separate guide?

## To-Do

- [ ] ✍️ Write explanation of _why_ SSG/SPA over SSR/etc.
- [ ] 🐛 Check that Tauri init is detecting project correctly (dev command, port, name, etc.)
- [ ] ✍️ Write up "Anatomy of a Tauri Project" to go through the resulting folder structure
- [ ] 🐛 Change identifier to not cause build error with defaults

**Objective**

- The reader should be successful in being able to setup a SvelteKit app with Tauri
- They won't need to necessarily know _why_ certain steps were taken, but are able to replicate them
- ❓The end of a guide should get you to the same place as `create-tauri-app` SvelteKit

## Outline

1. Initialize the SvelteKit Project
- `npm create svelte@latest`
- If you don't have create-svelte installed press `y`
- Choose directory
- Choose `Skeleton` project
- We recommend TypeScript, feel free to chose your preferred
- We're not going to choose any additional options
- `npm install`
3. Configure SvelteKit to Tauri-compatible settings
- ℹ️ Link to explination of _why_ we're configuring this (SSG/SPA, etc. concepts)
- `npm i -D @sveltejs/adapter-static`
- Open `svelte.config.js`
- Replace `import adapter from '@sveltejs/adapter-auto';` with `import adapter from '@sveltejs/adapter-static';`
- (Optional, pending PR for zero-config): Update `adapter` to look like this:

      adapter: adapter({
			fallback: 'index.html'
		})

5. Initialise the Tauri Rust Project
- `npm i -D @tauri-apps/cli` to install the Tauri CLI
- Add `"tauri": "tauri"` to scripts in `package.json`
- Run `npm run tauri init`
- 🐛 Tauri questions
- What is your app name: Should automatically be filled in
- Window title: Should automatically be filled in
- Public assets: Should automatically detect (might need to look at https://github.com/tauri-apps/tauri/pull/5742/ to verify)
- Localhost: 5173 (might need to look at https://github.com/tauri-apps/tauri/pull/5742/ to verify)
- What is your frontend dev command? (doesn't seem to detect package manager correctly)
- What is your frontend build command? (doesn't seem to detect package manager correctly)
- ℹ️ Reference to "anatomy of a Tauri project" to learn about the file structure
9. Tauri Dev
10. `npm run tauri dev`
11. Cool, you have a Tauri app
11. Tauri Build
12. 🐛 Tauri identifier needs to be changed (look at changing this behavior, sensible defaults)
14. `npm run tauri build`
13. "Exercise for the reader"
14. Rust: IPC (what we cover now)
15. JS & Beginner: Notifications?

- Guides will be HTML/CSS/JS, Vue, Svelte[Kit?], React and Solid
- Where do Vite and Next.js fit into this? Rust frameworks? (Yew, Sycamore, leptos)