Skip to content

ptkdev/sveltekit-electron-adapter

Repository files navigation

sveltekit-electron-adapter logo

🔌 sveltekit-electron-adapter

v0.3.0 License: MIT Language: TypeScript Framework: SvelteKit ECMAScript: 2019 Discord Server

Adapter for SvelteKit apps that prerenders your entire site as a collection of static files for use with Electron. Create your desktop apps with SvelteKit and Electron.

This is a fork of official sveltekit-static-adapter

🎁 Support: Donate

This project is free, open source and I try to provide excellent free support. Why donate? I work on this project several hours in my spare time and try to keep it up to date and working. THANK YOU!

Donate Paypal Donate Ko-Fi Donate GitHub Sponsors Donate Patreon Donate Bitcoin Donate Ethereum

📎 Menu

💡 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,
		}),
	},
};
  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

Example:

const config = {
	kit: {
		adapter: adapter({
			strict: false,
			policy: "default-src 'self'; script-src 'self'",
			viewport: `width=device-width`,
		}),
	},
};

📚 Documentation

Run npm run docs

👑 Backers and Sponsors

Thanks to all our backers! 🙏 Donate 3$ or more on paypal, ko-fi, github or patreon and send me email with your avatar and url.

👨‍💻 Contributing

I ❤️ contributions! I will happily accept your pull request! (IMPORTANT: Only to nightly branch!) Translations, grammatical corrections (GrammarNazi you are welcome! Yes my English is bad, sorry), etc... Do not be afraid, if the code is not perfect we will work together 👯 and remember to insert your name in .all-contributorsrc and package.json file.

Thanks goes to these wonderful people (emoji key):

Patryk Rzucidło
Patryk Rzucidło

💻 🌍 📖 🐛

💰 In the future, if the donations allow it, I would like to share some of the success with those who helped me the most. For me open source is share of code, share development knowledges and share donations!

🦄 Other Projects

💫 License

  • Code and Contributions have MIT License
  • Images and logos have CC BY-NC 4.0 License
  • Documentations and Translations have CC BY 4.0 License