Why I made an Electron + Svelte template

The common Electron stack typically involves React, Vue, or Angular. There are by no means no issues with the existing frameworks, but some templates built with these stacks typically are extremely huge and difficult to understand, making the onboarding process difficult, especially if you're new to Electron.

Here's an alternative that you may want to use in your next project.

Introducing, electron-svelte-ts. It's a template that aims to be a minimal alternative to the other templates out there. Here's everything it covers:

1. The Electron layer uses electron-forge. It's easy to get up and running, and allows for easy configuration through forge.config.js.

2. The template uses Electron security features by default. By connecting the frontend and the backend through IPC and preloading the required variables through preload.js.

3. The frontend uses Svelte, which compiles down to a simple JavaScript bundle that is automatically minified and processed.

4. Together with Svelte, Tailwind CSS is used to power the styling. It allows you to use class names to style the HTML directly.

The file structure is as follows:

src/main — The main process in Electron. Run code that does heavy processing here. src/renderer — The renderer process in Electron. It's what the main process loads on startup. public — Contains assets that can be loaded in the browser. scripts — Contains scripts that are used for deployment, development and production.

All components should go in src/renderer/components if you need them, and views should go in src/renderer/views.

For example, if you were to have a view based application, you would have a view named Home.svelte and another named Settings.svelte. Inside App.svelte, you should import both views and load the appropriate view by storing the current page in a svelte store named currentPage.

These best practices allow you to have a clean and concise structure that anyone can understand for your Electron applications.

Check out the template here.