Christian Engvall

You might have come across the main process and renderer process in Electron. This is a simple explanation of them.

Main process

The main process takes care of starting and running your app. In the electron tutorial app you can see this line in package.json:

 "main": "main.js"

This is the primary entry point to an electron app. And this is running in the main process. All the files you require from this file will be running in the main process as well.

If we would call process.type and log it with console.log() the word “browser” would turn up in the terminal running the app.

 console.log(process.type)

console log in main process

Renderer process

The renderer process takes care of showing your app in the Chromium browser. When the app is ready to show the electron tutorial app runs this command in main.js:

 mainWindow.loadURL(`file://${__dirname}/index.html`)

The javascript files you include from index.html or any other html-document is running in the renderer process. If we would run the same console.log() call as above, the word “renderer” would show up. But this time in the developer tools of chromium:

console log in renderer process

Documentation

So what API calls can we do from the different processes? The official documents are kind to us and list them under Main Process and Renderer process. But there are also api-calls that work in both processes.

Communicating between the processes

The api allows us to communicate between the processes. You can do that with remote which provides a simple way to do inter-process communication between renderer and the main process.

IPCRenderer and IPCMain

The api also allows us to use ipcRenderer and ipcMain to help us send events between the different processes. We can then listen to these events and implement the functionality we need.

Let us add localization to the electron tutorial app. We will look at translating both in the main and renderer process.

I tried some of the already existing npm-packages that helps with translating your app. They were good but didn’t feel 100% right to me. Some of them used .po-files, some of them were too advanced. So I decided to write a simpler one on my own. This is just a matter of taste. If you find another way that suits you better you should do it like that instead.

The localization script will store translations in .js files with a json-structure. It will use english as a fallback language, and try to use the users language by default. If no translation is found the original phrase will be sent back to be used.

1.Adding the script

Create a new folder in the project called translations. Create a new .js file and copy the contents below and save the file as i18n.js (why i18n?)

const path = require("path")
const electron = require('electron')
const fs = require('fs');
let loadedLanguage;
let app = electron.app ? electron.app : electron.remote.app

module.exports = i18n;

function i18n() {
    if(fs.existsSync(path.join(__dirname, app.getLocale() + '.js'))) {
         loadedLanguage = JSON.parse(fs.readFileSync(path.join(__dirname, app.getLocale() + '.js'), 'utf8'))
    }
    else {
         loadedLanguage = JSON.parse(fs.readFileSync(path.join(__dirname, 'en.js'), 'utf8'))
    }
}

i18n.prototype.__ = function(phrase) {
    let translation = loadedLanguage[phrase]
    if(translation === undefined) {
         translation = phrase
    }
    return translation
}

In the i18n constructor the script first checks if a language file for the current users locale exists. If it does that file is loaded. If the file does not exist the script loads the fallback language in en.js.

the __ function takes a phrase as an argument and checks if that is translated in the loadedLanguage. If it’s not it returns the phrase sent to the function.

This line takes care of loading app from either the main(mainmenu.js) or renderer(from index.html) process.

let app = electron.app ? electron.app : electron.remote.app

2.Adding translation files

Since i am from Sweden I will locate the tutorial app into Swedish. So I will create en.js and sv.js in the translations folder. To know what you should name your file so that the i18n script will find it and load it you can add this to main.js which will log the locale to the terminal(just add .js to it):

console.log(app.getLocale())

This is how the structure in the translation files should look. This is what en.js will look like:

{
 "Edit": "Edit",
 "Undo": "Undo",
 "Redo": "Redo",
 "Cut": "Cut",
 "Copy": "Copy",
 "Paste": "Paste",
 "Delete": "Delete",
 "Select all": "Select all",
 "View": "View",
 "Speech": "Speech",
 "Start speaking": "Start speaking",
 "Stop speaking": "Stop speaking",
 "Actual size": "Actual size",
 "Zoom in": "Zoom in",
 "Zoom out": "Zoom out",
 "Toggle fullscreen": "Toggle fullscreen",
 "Window": "Window",
 "Minimize": "Minimize",
 "Close": "Close",
 "Help": "Help",
 "Learn more": "Learn more",
 "About": "About",
 "Services": "Services",
 "Hide": "Hide",
 "Hide others": "Hide others",
 "Unhide": "Unhide",
 "Quit": "Quit",
 "Zoom": "Zoom",
 "Bring all to front": "Bring all to front"
}

And this is what my sv.js looks like:

{
 "Edit": "Redigera",
 "Undo": "Ångra",
 "Redo": "Gör om",
 "Cut": "Klipp ut",
 "Copy": "Kopiera",
 "Paste": "Klistra in",
 "Delete": "Radera",
 "Select all": "Markera allt",
 "Speech": "Tal",
 "Start speaking": "Börja tala",
 "Stop speaking": "Sluta tala",
 "View": "Visa",
 "Actual size": "Faktisk storlek",
 "Zoom in": "Zooma in",
 "Zoom out": "Zooma ut",
 "Zoom": "Zooma",
 "Toggle fullscreen": "Helskärmsläge",
 "Window": "Fönster",
 "Minimize": "Minimera",
 "Close": "Stäng",
 "Help": "Hjälp",
 "Learn more": "Läs mer",
 "About": "Om",
 "Services": "Tjänster",
 "Hide" : "Göm",
 "Hide others": "Göm övriga",
 "Unhide": "Visa alla",
 "Quit": "Avsluta",
 "Bring all to front": "Flytta fram alla"
}

3.Translating the menu (Main process)

As you might have guessed when reading the translation they look like menu items. So let us translate the menu that was added in the last tutorial.

Open up mainmenu.js that is located in the menu folder and add this require statement to the top of the file:

const {Menu} = require('electron')
const electron = require('electron')
const app = electron.app
var i18n = new(require('../translations/i18n'))

Now all we need to do is call i18n.__() for every menu item. These are what the first three looks like, here is the fully translated menu file.

const {Menu} = require('electron')
const electron = require('electron')
const app = electron.app
var i18n = new(require('../translations/i18n'))

const template = [
 {
     label: i18n.__('Edit'),
     submenu: [
     {
         role: 'undo', label: i18n.__('Undo')
     },
     {
         role: 'redo', label: i18n.__('Redo')
     },
....

What you do is add the label: attribute to the menu item, which gets the translated value from i18n__().

4.Translating navigation menu in index.js (Renderer process)

Create a new file in assets/js/ called translations.js. In this one we’ll use jquery to set the translated strings to our html-markup.

Open index.html and add i18n int the list of scripts.

 <!-- Scripts -->
 <script>window.$ = window.jQuery = require('./assets/js/jquery.min.js');</script>
 <script>window.i18n = new(require('./translations/i18n'));</script>
 <script src="assets/js/jquery.scrollex.min.js"></script>
 <script src="assets/js/jquery.scrolly.min.js"></script>
 <script src="assets/js/skel.min.js"></script>
 <script src="assets/js/util.js"></script>
 <script src="assets/js/main.js"></script>
 <script>
 require('./assets/js/menu')
 require('./assets/js/translations')
 </script>
 </body>
</html>

In translations.js it’s plain jquery to set the text of the elements that you wish to translate:

window.localization = window.localization || {},
function(n) {
     localization.translate = {

     menu: function() {
         $('#welcome-menu').text(i18n.__('Welcome'));
    },

   welcome: function() {
       $('#welcome .inner p').text(i18n.__('Hopefully this helps someone to get up to speed with electron.'));
   },

   init: function() {
         this.welcome();
         this.menu();
   }
 };

 n(function() {
     localization.translate.init();
 })

}(jQuery);

This is just two translations that are added. You can see the full file here.

The app now looks like this when running it on an os set to Swedish language:

electron tutorial app windows - translated to swedish

Designed by Freepik

This tutorial shows you how to add an Electron menu to your app. It will also make standard keyboard shortcuts, like copy and paste, work on MacOS.

We’ve actually got our work pretty much done for us thanks to the Electron documentation giving us a good template to use. We just need to implement and do some changes to it (If you want to that is). As always this tutorial uses Electron tutorial app as a canvas so you can download and/or look at the code on github.

1.Adding the menu

Open up a new file and paste this menu definition to it (this is the code from the documentation, with minor adjustments):

const {Menu} = require('electron')
const electron = require('electron')
const app = electron.app

const template = [
  {
    label: 'Edit',
    submenu: [
      {
        role: 'undo'
      },
      {
        role: 'redo'
      },
      {
        type: 'separator'
      },
      {
        role: 'cut'
      },
      {
        role: 'copy'
      },
      {
        role: 'paste'
      },
      {
        role: 'pasteandmatchstyle'
      },
      {
        role: 'delete'
      },
      {
        role: 'selectall'
      }
    ]
  },
  {
    label: 'View',
    submenu: [
      {
        label: 'Reload',
        accelerator: 'CmdOrCtrl+R',
        click (item, focusedWindow) {
          if (focusedWindow) focusedWindow.reload()
        }
      },
      {
        label: 'Toggle Developer Tools',
        accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
        click (item, focusedWindow) {
          if (focusedWindow) focusedWindow.webContents.toggleDevTools()
        }
      },
      {
        type: 'separator'
      },
      {
        role: 'resetzoom'
      },
      {
        role: 'zoomin'
      },
      {
        role: 'zoomout'
      },
      {
        type: 'separator'
      },
      {
        role: 'togglefullscreen'
      }
    ]
  },
  {
    role: 'window',
    submenu: [
      {
        role: 'minimize'
      },
      {
        role: 'close'
      }
    ]
  },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click () { require('electron').shell.openExternal('http://electron.atom.io') }
      }
    ]
  }
]

if (process.platform === 'darwin') {
  const name = app.getName()
  template.unshift({
    label: name,
    submenu: [
      {
        role: 'about'
      },
      {
        type: 'separator'
      },
      {
        role: 'services',
        submenu: []
      },
      {
        type: 'separator'
      },
      {
        role: 'hide'
      },
      {
        role: 'hideothers'
      },
      {
        role: 'unhide'
      },
      {
        type: 'separator'
      },
      {
        role: 'quit'
      }
    ]
  })
  // Edit menu.
  template[1].submenu.push(
    {
      type: 'separator'
    },
    {
      label: 'Speech',
      submenu: [
        {
          role: 'startspeaking'
        },
        {
          role: 'stopspeaking'
        }
      ]
    }
  )
  // Window menu.
  template[3].submenu = [
    {
      label: 'Close',
      accelerator: 'CmdOrCtrl+W',
      role: 'close'
    },
    {
      label: 'Minimize',
      accelerator: 'CmdOrCtrl+M',
      role: 'minimize'
    },
    {
      label: 'Zoom',
      role: 'zoom'
    },
    {
      type: 'separator'
    },
    {
      label: 'Bring All to Front',
      role: 'front'
    }
  ]
}

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

Save this in a new folder called menu, and why not name the file mainmenu.js

If you take a look at the two last lines in mainmenu.js you see two calls, one to buildFromTemplate(), which basically takes the array defined above, and creates a menu from it. Then we pass the menu to setApplicationMenu()

2. Showing the menu in the app

Now open up main.js and add require(‘./menu/mainmenu’) after creating the window. In the Electron tutorial app it is added to line 45, right before closing the createWindow function. We add it there because the call to setApplicationMenu needs to been done after the ready event is fired. Which it has in createWindow.

function createWindow () {
    ...

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
       // Dereference the window object, usually you would store windows
       // in an array if your app supports multi windows, this is the time
       // when you should delete the corresponding element.
       mainWindow = null
    })

    require('./menu/mainmenu')
}

If you start the app now, you can see that you have a different menu already.

3. Menu items

Let us look at what the mainmenu.js contains. It’s an array that defines MenuItems.

Label

Labels are what the menu item will say when it is displayed. It is required to set when you are defining a menu item that does not use Role(which we will look at soon). You can use this when localizing your menu items.

Submenu

A submenu is what you think it is. It is an array containing menuitems for a submenu.

Role

Electron provides us with roles that are predefined for Platform specific menu items such as undo, redo and those standard functions. The existing roles are:

• undo
• redo
• cut
• copy
• paste
• pasteandmatchstyle
• selectall
• delete
• minimize - Minimize current window
• close - Close current window
• quit - Quit the application
• togglefullscreen - Toggle full screen mode on the current window
• resetzoom - Reset the focused page’s zoom level to the original size
• zoomin - Zoom in the focused page by 10%
• zoomout - Zoom out the focused page by 10%

On macOS role can also have following additional values:

• about - Map to the orderFrontStandardAboutPanel action
• hide - Map to the hide action
• hideothers - Map to the hideOtherApplications action
• unhide - Map to the unhideAllApplications action
• startspeaking - Map to the startSpeaking action
• stopspeaking - Map to the stopSpeaking action
• front - Map to the arrangeInFront action
• zoom - Map to the performZoom action
• window - The submenu is a “Window” menu
• help - The submenu is a “Help” menu
• services - The submenu is a “Services” menu

When specifying role on macOS, label and accelerator are the only options that will affect the MenuItem. All other options will be ignored.

Accelerator

If you scroll down a bit in mainmenu.js to line 43 you can see something called accelerator. With the accelerator you can add keyboard shortcuts to your menu item. Built in accelerators are:

• Command (or Cmd for short)
• Control (or Ctrl for short)
• CommandOrControl (or CmdOrCtrl for short)
• Alt
• Option
• AltGr
• Shift
• Super

One interesting accelerator to look at is the CommandOrControl. It uses the command button on macs, but on windows it maps to control instead since Windows doesn’t use the command button.

click

When a menuItem is clicked you can define what code will be executed by defining a click event.

Type

You can se a type to a menuitem, a type can for example be a separator. If you look at line 56 in mainmenu.js you can see it being used. But there are more types defined:

• type String - Can be normal, separator, submenu, checkbox or radio.

Read more

To learn more about this topic you can read about Menu and MenuItem in the official docs. You can also take a look at the implemented menu on the Electron tutorial app repository on github

Next step in this tutorial series walks you through how to translate the menu and the rest of your electron app

In this electron packager tutorial we will look at how to create MacOS, Windows and Linux executables with an app icon. This is also a continuation of the Electron app icon post, so start there if you haven’t read it (It’s short, i promise).

I add this code to the Electron tutorial app on github. Just look at that repo if you want to see all the code.

In this tutorial I package the application on Windows, macOS and Ubuntu Linux. There are some information about building Windows apps from non-Windows platforms in the Electron packager readme.

1. Install Electron packager

Electron packager is created by electron-userland and this is what they say about it:

"Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution."

So lets go ahead and install it. Run these commands in the terminal in the app folder:

# for use in npm scripts
npm install electron-packager --save-dev

# for use from cli
npm install electron-packager -g

2. Setting productname and electron version

Electron packager looks for a product name in package.json, so lets go ahead and add one. We also need to add what version of electron to package the app with.

Lets begin with the electron version. We’ll add that from the terminal with this command:

npm install --save-dev electron

Now when that is done open up package.json and add a productname:

{
 "name": "electron-tutorial-app",
 "productName": "Electron tutorial app",
 "version": "0.1.0",
 "main": "main.js",
 "devDependencies": {
 "electron": "^1.4.3",
 "electron-packager": "^8.1.0"
 }
}

3. Building MacOS, Windows and Linux package from the terminal

To get to know what all these flags do, and what more flags exists you can read the electron-packager api.

MacOS

Now you can run this command from the terminal to build a package for mac:

electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds

Electron packager mac

Windows

And to build for Windows you can run this from the git bash:

electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron Tutorial App"

Electron packager windows

Linux

electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds

Electron packager ubuntu linux

overwrite: replaces any existing output directory when packaging.

platform: The target platform to build for

arch: the architecture to build for

icon: sets the icon for the app

prune: runs npm prune –production before packaging the app. It removes unnecesary packages.

out: the name of the directory where the packages are created.

4. Shortcuts

To make it easier to create new builds we can create scripts in package.json so that we don’t have to remember all these settings. Add the scripts below, making your package.json look like this:

{
 "name": "electron-tutorial-app",
 "productName": "Electron tutorial app",
 "version": "0.1.0",
 "main": "main.js",
 "devDependencies": {
 "electron": "^1.4.3",
 "electron-packager": "^8.1.0"
 },
 "scripts": {
 "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
"package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",    
"package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
 }
}

Now you can run:

npm run package-mac

npm run package-win

npm run package-linux

Installer tutorials

DMG installer for macOS tutorial

Windows installer tutorial.

Debian package installer tutorial

Coming soon: Red-hat package.

Next tutorial

The next tutorial in this series is Electron menu. It explains how to add a menu to your app.

It’s time to add Electron app icons to the Electron tutorial app. For this we need a png-icon, a .icns for macs and a .ico for windows. For Linux we only need the pngs.

This code is added to the Electron tutorial app on github. Have a look at that repository if you would like to see all the source code.

The icons need to be set when creating a new BrowserWindow. But they need also be set when packaging the app. So by setting it in the code won’t make any difference when debugging your app with electron . That’s why we’ll first take a look at the code. Then we’ll take a look at packaging our app with electron-packager. But don’t worry, it’s an easy task.

1. Creating our icns and ico-files

First we need an icon that is 1024x1024 pixels large and saved in PNG. I’ve got one looking like this:

Electron tutorial app icon

Now go to ICONVERT ICONS and upload the PNG and the service will take care of creating the other icon-formats.

2. Folder structure

Now create a folder structure that looks like this:

electron icon folder structure

Create a folder called icons in the assets folder. And in that folder create one folder called mac, one called png and one called win. Put the .icns-file into the mac folder, the pngs in the png folder and the .ico file in the win folder.

3. Updating main.js with path to icon

Open main.js and add icon: path.join(__dirname, 'assets/icons/png/64x64.png') when instantiating the BrowserWindow. But also var path = require(‘path’) at the top of the main.js.

const electron = require('electron')
var path = require('path')

...

 mainWindow = new BrowserWindow({titleBarStyle: 'hidden',
     width: 1281,
     height: 800,
     minWidth: 1281,
     minHeight: 800,
     backgroundColor: '#312450',
     show: false,
     icon: path.join(__dirname, 'assets/icons/png/64x64.png')
 })

At this point you can see the icon when running the app in Ubuntu. (Read how to get going with electron in ubuntu).

Electron icon ubuntu

The next step is to create an executable for MacOS and Windows with the icon we need to package the app. This next step is covered in Electron packager tutorial.