Getting started with Electron and Svelte

Short tutorial setting up a blank but working Electron app with Svelte.

There are some project templates for exactly this purpose out there. Each one had some sweets but also some oddities (like producing ton’s of warnings in Electron’s dev console). So i massaged and combined them and came up with what i’m describing here!

Setting up Node & Svelte

Create or navigate into your empty project folder and execute the following commands in your terminal:

npx degit sveltejs/template
npm install

This should create the package.json and a Rollup configuration with basic Svelte.

A little cleanup to be made… If you have a look at the package.json you will see sirv-cli as only production dependency. You won’t need this for Electron, so move it to dev:

npm install sirv-cli --save-dev

Relativize all of your links inside the public/index.html for usage through Electron. One example:

<script defer src='/bundle.js'></script>

becomes

<script defer src='bundle.js'></script>

Svelte is ready to go! Test it out by executing

npm run dev

and open http://localhost:5000. You should see a Hello World printed!

Setting up Electron

Install Electron as a dev dependency:

npm install --save-dev electron

Create the electron main script - i will call it electron.js — under src/

Now edit your package.json and

• Add following line under the existing version line:

"main": "./src/electron.js",

• Add 2 commands to the scripts section:

"electron": "run-s build pure-electron",
"pure-electron": "electron ."

Electron app is ready to go! Test it by executing:

npm run electron

Live Reload for Electron

You are now able to build and run the Electron app. In order to have a live reload (updating the app when you change your CSS/JavaScript files) do the following.

• Install the Chokidar library which helps with file watching:

npm install chokidar --save-dev

• Edit src/electron.js and add the following code to the createWindow() function under the instantiation of the mainWindow variable:

let watcher;
if (process.env.NODE_ENV === 'development') {
    watcher = require('chokidar').watch(path.join(__dirname, '../public/bundle.js'), { ignoreInitial: true });
    watcher.on('change', () => {
        mainWindow.reload();
    });
}

• Also close the watcher in the existing mainWindow.on(‘closed’…

if (watcher) {
    watcher.close();
}

• Now add these commands to your package.json:

"electron-dev": "run-p autobuild pure-electron-dev",
"pure-electron-dev": "NODE_ENV=development electron ."

Live reload ready to go! Test it by executing

npm run electron-dev

and e.g. adding another exclamation mark to the headline inside of src/App.svelte!

Bundling a distribution (OS X)

In order to build a distribution, you have a couple of options. Most common are Electron Packager (Electrons default bundler) and Electron Builder. Both come with their own ways of configuring a distribution, so don’t mix them up. I will show how to build a minimal OS-X bundle with Electron Builder.

• Install the package:

npm install electron-builder --save-dev

• Create a electron-builder.yml file in the root of your project:

appId: "my.app.id"
# Package app code into a asar archive. Set to false to debug issues.
asar: true
# Mac OS configuration
mac:
  icon: "public/icons/my_app.icns"
  category: "public.app-category.utilities"

• Add this command to package.json:

"dist-darwin": "run-s build pure-dist-darwin"
"pure-dist-darwin": "electron-builder --dir --mac --config electron-builder.yml"

Thats it! If you are on Mac, you should now be able to execute

npm run dist-darwin
open dist/mac/svelte-app.app

In the quickstart guide you’ll find out how to customize the most basic things, e.g:

• Change the app name through changing the name in the package.json.
• Change the window title through changing the title in public/index.html.

Setting up app icons (OS X)

By default the app will use the electron icon. You can customize this easily, once you have a icon image and know how to produce the required artifacts from it. Here is how i did it:

• Used Gravit Designer to create an image.
• Exported the image as PNG.
• Used Icon Generator to generate the icons from the PNG
• Renamed the generated icon folder from `AppIcon.appiconset` to `AppIcon.iconset` (so iconutil can work with it)
• Execute on terminal:

iconutil -c icns AppIcon.iconset

• Moved the AppIcon.iconset to what is configured in the electron-builder.yml.

In case you think you did everything correctly but still see the standard Electron icon… Try the following:

touch dist/mac/template-electron-svelte.app
touch dist/mac/template-electron-svelte.app/Contents/Info.plist

Final Words

This is just a starter. For Electron functionality refer to it’s excellent guide: https://electronjs.org/docs. To build and publish releases see https://www.electron.build/.

Find the complete code under https://github.com/jzillmann/template-electron-svelte. The commits are structured similar to this article!

Hope this helped you as much as if it would have helped me! Let me know if you have any simplifications or recommendations on that!