DEV Community

Getting started with Electron and Svelte

Johannes Zillmann on October 14, 2019

Short tutorial setting up a blank but working Electron app with Svelte. There are some project templates for exactly this purpose out there. Each ...
Read full post
Collapse
 
personthing profile image
Tim Schottler • • 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!

Collapse
 
o_a_e profile image
Johannes Zillmann •

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

Collapse
 
kevinschweikert profile image
Kevin Schweikert •

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
Collapse
 
mey profile image
me-y •

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

Collapse
 
franknoirot profile image
Frank Noirot •

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.

Collapse
 
franknoirot profile image
Frank Noirot •

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.

Collapse
 
o_a_e profile image
Johannes Zillmann •

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

Collapse
 
nickyhajal profile image
Nicky Hajal •

This is extremely helpful, thank you so much for putting it together!

Collapse
 
coderninja123 profile image
CoderNinja123 •

WOW. Svelte + Electron + Live Reload = AWESOME DEVELOPMENT EXPERIENCE!