Bash script for getting SvelteKit working with wails.

[figuerom16]

This is more of list of steps I followed in order to get Wails and SvelteKit to work together in Linux. It will absolutely break in the future with changes to Wails or SvelteKit.

The important notes are:

• The easiest way to put SvelteKit into SPA mode with prerendering is to create a src/routes/+layout.ts file and add both export const prerender = true and export const ssr = false. Then of course set the static adapter in svelte.config.js.
• A lot of this is copying assets and the main page from the wails svelte init then reinserting them into SvelteKit.
• wails.json needed wailsjsdir": "./frontend/src/lib and main.go needed to have dist changed to build for embed.
• Don't use javascript navigation window.location.href = '/<some>/<page>' it will unload the wails runtime. What this means is that when using a frameless window you can end up losing the ability to call minimize, maximize, quit. Instead use import { goto } from '$app/navigation' then call goto('/<some>/<page>') in your +page.svelte. This will prevent a full page navigation.
• That's it! Not too much to it.

usage ./sveltekit-wails.sh pnpm newapp

sveltekit-wails.sh

#!/bin/bash
manager=$1
project=$2
wails init -n $project -t svelte
cd $project
sed -i "s|npm|$manager|g" wails.json
sed -i 's|"auto",|"auto",\n  "wailsjsdir": "./frontend/src/lib",|' wails.json
sed -i "s|all:frontend/dist|all:frontend/build|" main.go
mv frontend/src/App.svelte +page.svelte
sed -i "s|'./assets|'\$lib/assets|" +page.svelte
sed -i "s|'../wails|'\$lib/wails|" +page.svelte
mv frontend/src/assets .
rm -r frontend
$manager create svelte@latest frontend
mv +page.svelte frontend/src/routes/+page.svelte
mkdir frontend/src/lib
mv assets frontend/src/lib/
cd frontend
$manager i
$manager uninstall @sveltejs/adapter-auto
$manager i -D @sveltejs/adapter-static
echo -e "export const prerender = true\nexport const ssr = false" > src/routes/+layout.ts
sed -i "s|-auto';|-static';|" svelte.config.js
cd ..
wails dev

Last tested with DevDependencies:

devDependencies:
@sveltejs/adapter-static 2.0.2
@sveltejs/kit 1.22.0
svelte 4.0.4
svelte-check 3.4.4
tslib 2.6.0
typescript 5.1.6
vite 4.3.9

[leaanthony]

Thanks for this 👍 Would you consider writing this into a guide for the website?

[figuerom16]

I can do that. I'm currently testing out a few more Kit specific items so the final section is incomplete / needs to be flushed out with a better explanation and styling. Should I do a PR when I have it done?

https://github.com/figuerom16/wails/blob/master/website/docs/guides/sveltekit.mdx

[leaanthony]

Yes please! Looks amazing! 👍