SveltronKit

A minimal template for building Electron apps with SvelteKit.

Includes native support for Typscript and uses Electron's official recommended Electron Forge for packaging.

Everything you can do in SvelteKit, you can do in SveltronKit; meaning that you can use component libraries like Shadcn-Svelte.

[!IMPORTANT] This template uses SvelteKit's hash router to create a single-page app. The only difference you'll have to look out for is to start all your routed links with #/ instead of /.

Dependencies & Frameworks

• SvelteKit
• Electron
• Electron Forge
• TypeScript
• TailwindCSS

[!NOTE] I've included TailwindCSS in this template because I use it in my own projects, but you can remove it easily if you don't want it.

Getting Started

[!WARNING] This project uses pnpm and uses patching to work around some issues with SvelteKit. When this PR merges, you can remove the patching and use the latest version of SvelteKit.

Start by installing the dependencies:

pnpm install

Development:

pnpm run start

Electron Forge with the Vite plugin will take care of running the development server and building the app for you. You don't need to run vite dev or vite build yourself. This also means that it supports hot module replacement (HMR).

Production:

pnpm run package

This will build the app and you can find the output in the out directory. You can run the production app by opening the .app file in the out directory. This will not create your app's installer for distribution though.

To create a distributable installer, you can use:

pnpm run make

This will create a distributable installer for your app. You can configure this in the makers section in forge.config.ts. Reference the makers documentation for more information.

Electron Crash Course

[!NOTE] This is a super simplified version of the Electron documentation meant to give you a general idea of how Electron works and how each file corresponds to responsibilities in Electron. For a more accurate description of how Electron works, you can refer to the official documentation.

I found that most of the problems I encountered when setting up Electron were because I didn't know how Electron works and that the documentation was too dense to get up to speed with, so I'll include a crash course here. I will be making a lot of analogies to web development as it seems like a lot of people who are new to Electron come from web development.

Because everything in Electron is client based, you'll need to host your own server if you want to access any sensitive logic like a database or authentication, etc.

main.ts

This file defines what the main process will do. The process runs your app. It's the one that creates and manages windows and also has permissions to access the file system. You also define "signals"/"endpoints", through IPC, that let the renderer process (browser that runs your app) can "call" to interact with the file system.

By default, Electron will block off file system access to the renderer process as a security measure, which is the reason why you need to use IPC to interact with the file system.

preload.ts

Think about this as a "bridge" or a "network"/"proxy" between the main process and the renderer process. You specify what functions that the renderer process can call and these functions will usually be interacting with the file system through the main process.

renderer

The renderer process is the browser that runs your app. Just treat this like another SvelteKit app.

Overview

flowchart LR
  subgraph main[Main Process]
    electron
  end
  subgraph renderer[Renderer Process]
    browser
  end
  electron <-- preload --> renderer