Johannes Zillmann

Posted on Oct 14, 2019 • Originally published at blog.morethan.io on Oct 14, 2019

Getting started with Electron and Svelte

#electron #javascript #desktopapp #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='/build/bundle.js'></script>

becomes

<script defer src='build/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 (plus npm-run-all & cross-env) as a dev dependency:

npm install --save-dev --verbose electron 
npm install --save-dev npm-run-all
npm install --save-dev cross-env

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/build'), { 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 dev pure-electron-dev",
"pure-electron-dev": "cross-env 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!

Top comments (12)

Tim Schottler • Feb 24 '20 • Edited

I had one issue setting it up on Windows. Had to change 2 things...

Change the npm script:

"pure-electron-dev": "set NODE_ENV=development && electron ."

And trim() the incoming process.env.NODE_ENV

const mode = process.env.NODE_ENV.trim()

...

if (mode === 'development') {
  // set up watcher
}

Very well done article though, thank you!

Johannes Zillmann • May 25 '20

Thanks @personthing !
Changed the post to use cross-env as more folks were running into this!

Kevin Schweikert • Dec 22 '19

Very nice article and i managed to set it up working but there are a few errors you should fix:

you have to install the package npm-run-all with npm install npm-run-all
in your chokidar watcher configuration there are backslashes before special characters...think that's an error from copying
rename autobuild to dev in the electron-dev script

me-y • May 31 '20

Hi Johannes,

First, thank you for this article, it allows to get a very compact app compared to other examples I found.

I'd like to make a windows app with saving capability in order to keep its state (kanban like app). I managed to use electron-store with vue in a first try but then I discovered svelte which is a lot more easy to learn.

Unfortunately, I am part of the guys that no not know fully understand electron, node.js,... and I am not able to set up electron-store with svelte. I tried to reference it as I did with vue by simply calling it with "require". "require" is not defined / accessible with svelte template.

Any advice ? Can you help ?

Thank you

Frank Noirot • Feb 23 '20

This was so helpful, thank you Johannes!

Has anyone gotten the Electron frontend import of electron working in Svelte? I'd like to use ipcRenderer in my Svelte frontend to kick off a Node process in the Electron main script, but I get errors for the 'fs' and 'path' imports that Electron uses whenever I try.

Frank Noirot • Feb 23 '20

Update: I found this StackOverflow discussion super helpful: stackoverflow.com/a/59888788. The solution isn't anything dependent on Svelte's behavior, but using the preload functionality within Electron.

Johannes Zillmann • Jan 25 '20

Thanks @schweikertkevin , i fixed all 3 errors!
Also in the meantime the svelte rollup default has changed to put the bundle files under public/build which broke the auto-reload...
I adapted the article to that as well! Things moving fast...