Svelte, Vite & Wails Project Setup

This chapter explains how to set up Wails for building desktop applications using Vite and SvelteKit.

Note:
Wails v3 is still under development and has not been officially released, so certain details discussed here may be subject to change in the future.

Update 08 Dec, 2024
At the time of writing, the -t sveltekit-ts template was not supported.
Since wails v3.0.0-alpha.8, sveltekit (static mode) is officially supported in the template list.
Prefer using the template instead of running the below setup
I’ve updated the project to support latest wails v3.0.0-alpha.8. Changes in this commit

TLDR;

We can skip this chapter, as with Wails v3.0.0-alpha.8, s this setup using wails cli with the following command:

$ wails3 init -d . -n "learn-wails" \
	-productcompany "WMH" \
	-productcopyright "© now, WMH" \
	-productidentifier "com.wmh" \
	-productname "AIO Calculator" \
	-t "sveltekit-ts"

Setup

• Install Wails CLI

$ go install -v github.com/wailsapp/wails/v3/cmd/wails3@latest`

• Verify the Installation
  • Run wails3 version to ensure wails cli was installed properly
  • Use wails doctor to check if all the library requirements for Wails development are met.
  • Run wails3 --help for details on available commands

Create Project

• List supported templates for UI frameworks:

$ wails3 init -l

• Create Project directory with all Go dependencies installed:

$ wails3 init -d . -n "learn-wails" \
	-productcompany "WMH" \
	-productcopyright "© now, WMH" \
	-productidentifier "com.wmh" \
	-productname "AIO Calculator" \
	-t "sveltekit-ts"
$ cd learn-wails

• To add SvelteKit to your project after deleting the default frontend folder, run the following command:

$ npx sv create frontend

Frontend Setup:

• After creating the SvelteKit app, install the necessary dependencies:

$ pnpm add @wailsio/runtime@latest
$ pnpm remove @sveltejs/adapter-auto
$ pnpm add @sveltejs/adapter-static

• Update svelte.config.js and other related modules to support @sveltejs/adapter-static.

Backend Changes

• Update main.go as follows:

-//go:embed frontend/dist
+//go:embed frontend/build
+var assets embed.FS

• Modify Taskfile.yml to include the necessary configurations. Ensure you have the Taskfile CLI installed:

 install:frontend:deps:
   ...
   sources:
     - package.json
-    - package-lock.json
+    - pnpm-lock.yaml
   generates:
     - node_modules/*
   preconditions:
-    - sh: npm version
+    - sh: pnpm -v
       msg: "Looks like `pnpm` isn't installed. pnpm and nodejs are required"
   cmds:
-    - npm install
+    - pnpm install
 ...
 build:frontend:
   ...
   generates:
-    - dist/*
+    - build/*
   ...
   cmds:
-    - npm run build -q
+    - pnpm build
 ...
 generate:bindings:
    ...
    generates:
-     - "frontend/bindings/**/*"
+     - "frontend/src/lib/wailsjs/**/*"
    cmds:
-     - wails3 generate bindings -f '{{.BUILD_FLAGS}}'
+     - wails3 generate bindings -d 'frontend/src/lib/wailsjs' -f '{{.BUILD_FLAGS}}'
 ...
 dev:frontend:
   ...
   cmds:
-    - npm run dev -- --port {{.VITE_PORT}} --strictPort
+    - pnpm dev --port {{.VITE_PORT}} --strictPort

Generate Wails Runtime Bindings:

Generate bindings (when running the app for the first time) using this command:

task generate:bindings

Module Configuration

• Update the go.mod file
  • Change the module name to match your project’s name:

module learn-wails
go 1.23.3

Test and Debugging:

Test your changes thoroughly and resolve any remaining bugs:

wails3 dev

You can clone this commit to get started right away.