Hot-reloading the Electron app?

Development
1

Is there any way to hot-reload changes when developing the Electron app?

I find myself making small, frequent changes that I want to iterate on quickly, and hitting ctrl+C and restarting ./run.sh each time is quite a bit of overhead for those little tweaks.

2

You could use a tool like watchman or inotify-tools.

1 Like
3

@tessus is that something that can just be added to a workflow, or would it require a change in the Joplin project?

1 Like
4

@CalebJohn this would have nothing to do with Joplin. Just watch the directory for changes and run a script that kills the ./run.sh process and restarts it again.

That’s the only thing I could think of. Electron does not have a “live preview”.

1 Like
5

Thanks for the suggestion! Here's what I've been using for semi-automatic rebuilding:

cd joplin/ElectronClient
watchman-make -p '**/*.js' '**/*.jsx' --run ./run.sh

It still requires you to quit the application each time you want it to rebuild, but at least you don't have to re-run ./run.sh each time. Here's what the workflow loop looks like in practice:

  1. Edit and save files
  2. Switch to the "Electron" app and cmd+Q to quit it
  3. watchman immediately restarts the app for you (whereas usually you'd have to switch back to the terminal, type ./run.sh, and hit enter)

I'd guess this saves about 1s for each iteration, which is an improvement. Would love to hear any ideas on how to improve this further. :slightly_smiling_face:

2 Likes
6

I'll write a script later this evening that you can use instead of run.sh in your watchman command. It will kill the running process and start it again.
I'm currently heading out for a nice picnic in the park... No time for coding right now :wink:

1 Like
7

I was looking into auto reloading a while ago, too. I think I ended up using something similar to watchman to execute run.sh, but instead of quitting the app, i added a menu to reload the page. Most of the time I didn’t need to quit/restart the app if you’re not changing stuff in the “backend”.

1 Like
8

Added docs for this auto-reload pattern in this PR:

9

Hey @everyone,

I use electron-reload module, It is fast and one just have to save the file and it will reload the changes in seconds wihtout closing/opening the electron app

We just have to install electron-reload by this command

npm install electron-reload

And adding this one line to our electron main.js

require('electron-reload')(__dirname);

This is the literally easiest way to reload it everytime we save file.
And if your code contains error then it will show the errors first and exit so can make changes before restarting it.

For me This is life saver
You can read more about it here


2 Likes