An easier way for Electron.js applications

You must have tried it once. For sure, every single time you must have given a look—again, at Electron.js documentation. Let’s check Electron’s quick start project and what it takes to have a basic application running.

Well, it works well. However, it makes everything explicit, and probably more than it should for most of us.

Let’s rewrite all this, in a simpler way:

Readable, shorter, functional.

Sweet Electron’s main objective:

Obviously, there is more to it.

Know about your environment

Knowing whether you are in development or in production mode can be useful, as well as what’s the current platform, etc. For a set of methods, sweet-electron provides an instance of electron-is which easily let you know more about the application environment:

.url(is => [__dirname, is.dev() ? 'index_dev.html' : 'index.html'])

Features

Add renderer events

If you consider ipcMain clear enough, here is the initial way to handle events coming from the renderer side:

const { ipcMain } = require('electron');
ipcMain.on('asynchronous-message', (event, arg) => {
  event.sender.send('asynchronous-reply', 'pong');
});

Using sweet:

.rendererEvents({
  'asynchronous-message': (event, arg) => {
    event.sender.send('asynchronous-reply', 'pong');
  },
})

Register shortcuts

Forget about globalShortcut.register(...):

.shortcuts({
  'CmdOrCtrl+X': () => ...,
});

More

Easily set the about menu, the application menu, the file path that needs to be loaded, the window configuration, …in a flash.

If you are into creating Electron applications, give a look at the github repository. It really takes no time to set up.

Thanks for your time, I hope this will make sense to someone out there and be somehow useful! ‍⚡️