Skitty

Template for building SvelteKit + Tauri (Skitty)

Warning

This project is supposed to be used temporary only (until svelte-add tauri is released). Consider checking svlete-add before continue.

Table of contents

• Skitty
• Warning
• Table of contents
  • Developing
  • Configure / Step-by-step guide
  • Notes
  • Special Thanks

Developing

$ git clone https://github.com/Mattchine/skitty <your path>
$ cd <your path>
$ yarn install
$ yarn tauri dev

Configure / Step-by-step guide

1. Create project with svelte-add

   $ npm init @svelte-add/kit@latest
   # Follow the prompts to select the integrations you want
   

2. Add Tauri to your project

   $ cd <your path>
   $ yarn add -D @tauri-apps/cli
   $ yarn add @tauri-apps/api
   

3. Disable SvelteKit SSR (I have problem with this for days, thanks to jsmenzies)

• 3.1 Create src/hooks/index.ts

  /** @type {import('@sveltejs/kit').Handle} */
  export async function handle({ event, resolve }) {
    return await resolve(event, {
      ssr: false
    });
  }
  

• 3.2 Add hooks/index.ts to svelte.config.js

  kit: {
    files: {
        hooks: 'src/hooks/index.ts'
      }
  }
  

4. Change tauri config src-tauri/tauri.conf.json

• 4.1 Change devPath from PORT 8080 to 3000
• 4.2 Set beforeDevCommand and beforeBuildCommand

  "build": {
    "distDir": "../public",
    "devPath": "http://localhost:3000",
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": "yarn build"
  },
  

5. Now you can run

     $ yarn tauri dev
   

6. But if you try yarn tauri build , it won't work right now. We need to fix distDir. Again, change src-tauri/tauri.conf.json

     "build": {
    "distDir": "../build",
     }
   

7. But where is build? Well, you have to tell svelte that you need static-site with adapter static.

• 7.1 Install adapter-static first

  $ yarn add -D @sveltejs/adapter-static@next
  

• 7.2 Change svelte.config.js as follows. ```js import staticAdapter from '@sveltejs/adapter-static'; // ...

  kit: { adapter: staticAdapter(), prerender: { default: true, }, files: { hooks: 'src/hooks/index.ts' } }

8. Now both `yarn tauri dev` and `yarn tauri build` will works just fine.
9. (Optional) Adding path alias, following the instruction in [sveltekit FAQ](https://kit.svelte.dev/faq#aliases).
- As you can see in the template you can use `import '$styles/app.css'` or any other path alias

## Notes
- This repository is for my future self and hope it would help someone out there too.

## Special Thanks
- [jsmenzies](https://github.com/jsmenzies)
- [svelte-add](https://github.com/svelte-add/svelte-add)
- And, of course, all underlying project: `Svelte`, `SvelteKit`, `Taiilwind`, `Tauri`, and many mores!.