Skip to content

live-reload Electron application during development

License

Notifications You must be signed in to change notification settings

manidlou/elemon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 

Repository files navigation

#elemon

npm

elemon is a tiny module that tries to provide a simple and yet efficient live-reload tool for developing Electron applications. You just need to pass the app and BrowserWindows and the name of the files that are associated with them as a parameter to the elemon function after your app is ready. Please check out the example below to see how you can easily use it to watch your app and cleanly reload it upon any changes. If the changed file is the main app file, then it relaunch the app and exit the current instance. If the changed file is a file that is associated with a browser window, then that window will only be reloaded.

In fact, setting up a clean live-reload tool for developing an elenctron application is super simple by using the Electron API. The api already comes with whatever you need; just add a watcher (like chokidar or whatever watcher you like) and you are all set.

####Install

Please use npm install --save-dev elemon.

####Usage

elemon(appOpts, windowsOpts)

appOpts: {Object} {app:, res: ''}

the app option object has:

  • app {app object} main app object
  • res {String} main app file name

windowsOpts: {Array<Object>} [{bw:, res: ['']}]

each option object has:

  • bw {BrowserWindow object} a browser window object
  • res {Array<String>} array of any file name that is somehow associated with this browser window

####Example

Suppose it is ,a very simplified, app file structure:

example_proj
  |
  |__view
  |     |__reg.html
  |     |__login.html
  |     |__reg_handler.js
  |     |__login_handler.js
  |
  |__stylesheets
  |     |__style.css
  |
  |__app.js

then, in the main process file where usually app and browser windows are created:

app.js

const electron = require('electron');
const {app, BrowserWindow} = electron;
const elemon = require('elemon');

const reg_index = `file://${__dirname}/view/reg.html`;
const login_index = `file://${__dirname}/view/login.html`;
var reg_win = null;
var login_win = null;

function create_wins() {

  reg_win = new BrowserWindow({
    width: 600,
    height: 400,
    ...
  });

  login_win = new BrowserWindow({
    width: 600,
    height: 400,
    ...
  });
}

// ... and other usual stuff ... //

app.on('ready', () => {
  create_wins();

  // this is all that you have to add to your main app script
  var app_opts = {app: app, res: 'app.js'};
  var win_opts = [{bw: reg_win, res: ['reg.html', 'reg_handler.js', 'style.css']}
                , {bw: login_win, res: ['login.html', 'login_handler.js', 'style.css']}];
  elemon(app_opts, win_opts);
});

That's it. Have fun writing your Electron applications.

About

live-reload Electron application during development

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published