Getting started with Electron and Svelte
Tags: electron, javascript, desktopapp, svelte
Published: 2019-10-14 20:00:16

---
title: Getting started with Electron and Svelte
published: true
date: 2019-10-14 19:44:32 UTC
tags: electron,javascript,desktop-app,svelte
canonical_url: 
---

Short tutorial setting up a blank but working [Electron](https://electronjs.org) app with [Svelte](http://svelte.dev/).

_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:

```shell
npx degit sveltejs/template
npm install
```

This should create the _package.json_ and a [Rollup](https://rollupjs.org) configuration with basic Svelte.

**A little cleanup** to be made… If you have a look at the _package.json_ you will see [sirv-cli](https://www.npmjs.com/package/sirv-cli) as only production dependency. You won’t need this for Electron, so move it to dev:

```shell
npm install sirv-cli --save-dev
```

**Relativize all of your links** inside the _public/index.html_ for usage through Electron. One example:

```javascript
<script defer src='/build/bundle.js'></script>
```

becomes

```javascript
<script defer src='build/bundle.js'></script>
```

**Svelte is ready to go**! Test it out by executing

```shell
npm run dev
```

and open [http://localhost:5000](http://localhost:5000). You should see a _Hello World_ printed!

### Setting up Electron

Install [Electron](https://electronjs.org) (plus [npm-run-all](https://www.npmjs.com/package/npm-run-all) & [cross-env](https://www.npmjs.com/package/cross-env)) as a dev dependency:

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

Create the [electron main script](https://electronjs.org/docs/tutorial/application-architecture) - i will call it _electron.js_ — under _src/_

{% gist https://gist.github.com/jzillmann/4e7164ad7b9a24e120450e2d1d45c048 %}

Now edit your _package.json_ and

- Add following line under the existing _version_ line:

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

- Add 2 commands to the _scripts_ section:

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

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

```shell
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](https://github.com/paulmillr/chokidar) library which helps with file watching:

```shell
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_:

```javascript
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’…_

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

- Now add these commands to your _package.json_:

```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

```shell
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](https://github.com/electron/electron-packager) (Electrons default bundler) and [Electron Builder](https://www.electron.build). 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:

```shell
npm install electron-builder --save-dev
```

- Create a _electron-builder.yml_ file in the root of your project:

```yams
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_:

```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

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

In the [quickstart guide](https://www.electron.build/#quick-setup-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](https://designer.gravit.io) to create an image.
- Exported the image as PNG.
- Used [Icon Generator](https://github.com/onmyway133/IconGenerator) 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:

```shell
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:

```shell
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](https://electronjs.org/docs). To build and publish releases see [https://www.electron.build/](https://www.electron.build/).

Find the complete code under [https://github.com/jzillmann/template-electron-svelte](https://github.com/jzillmann/template-electron-svelte). The [commits](https://github.com/jzillmann/template-electron-svelte/commits/master) 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!

* * *