DEV Community

Patryk Rzucidło
Patryk Rzucidło

Posted on

SvelteKit + Electron: Create your desktop web app

I make a new Adapter for SvelteKit apps that prerenders your entire site as a collection of static files for use with Electron.

🏗 https://github.com/ptkdev/sveltekit-electron-adapter
🙏 Support me with ⭐️ on github

💡 Features

  • [✔️] Easy to use
  • [✔️] MIT License
  • [✔️] Make desktop apps with svelte kit and electron

👔 Screenshot

sveltekit-electron-adapter

🚀 Setup

  1. Create new SvelteKit Project
  2. Install this adapter npm install @ptkdev/sveltekit-electron-adapter --save-dev
  3. Edit svelte.config.js and replace default adapter with electron-adapter:
import adapter from "@ptkdev/sveltekit-electron-adapter";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            strict: false,
        }),
    },
};
Enter fullscreen mode Exit fullscreen mode
  1. Run npm run build (⚠️ IMPORTANT: Only pages with export const prerender = true; are supported)
  2. Create new Electron Forge Project
  3. Copy build content from sveltekit project and paste in src folder of electron forge project
  4. Run Electron project with npm run start or generate binary with npm run make

I make a boilerplate that "automate" this process, but is working in progress: check this repo.

🧰 Options

The adapter({ options }) parameters list:

Parameter Description Values Default value Available since
pages See official docs
assets See official docs
fallback See official docs
precompress See official docs
strict See official docs
policy Set meta-tag content-security-policy String Empty v0.2.0
viewport Set meta-tag viewport String width=device-width, initial-scale=1.0, viewport-fit=cover v0.2.0

Examples:

See examples folder on github

❤️ Thanks! Leave a feedback!

Top comments (0)