Implementing tabs in Electron

To implement tabs for your application there is a neat project called electron-tabs. I've created demo application to demonstrate real use case how to configure and manipulate tabs.

First thing to explain is that electron-tabs will require to load your tab content in webview. So you'll have to have one HTML page which will embed electron-tabs tags and another page(s) which will be shown in content area when you

Read More

Angular 2 + Electron + Angular-CLI

I think time has come to switch from AngularJS to version 2. While there are projects out there which are proof-of-concept that Angular 2 can run in Electron, I have an error which I have yet to find a solution for.

Note: I'm trying to access electron module in renderer by using ng build to compile my project.

The problem

I've made my project using two package.json structure like

Read More

Debugging Electron in VS Code - again

So, a lot of people had problems with debugging Electron apps with Visual Studio Code, so I've made a video on the subject to demonstrate how it works on my end.

Just to inform on couple of things I've also made on Youtube. People who follow content here should already be familiar with the content, since I've already written about it, but I just wanted to recap.

Introduction to Electron

Read More

Auto-updater application name

I've included auto-updater in my project, but although I've been getting valid 200 response (which is fine for Squirrel), error event was dispatched in my app. After some time, I've found out that the problem is in naming of my application.

In package.json, I've set product name to be 2 words (i.e. "Hello World"). I'm using electron-builder which will create zip file for distributing update, but it will

Read More

Video series

Over the time, I've received multiple requests to do video tutorials on working with Electron. I'll be recording bite-size, laser focus, no BS videos.

Feel free to comment, like, subscribe. :-)

Read More

Different ways to communicate between main and renderer process

No BS. Code says it all.

Main process

'use strict'

var electron = require('electron');  
var {app, BrowserWindow, ipcMain} = electron;  
var mainWindow = null;

app.on('ready', () => {  
    mainWindow = new BrowserWindow({
        width: 200,
        height: 200

// Listen for async message from renderer process
ipcMain.on('async', (event, arg) => {  
    // Print 1
    // Reply on async message from renderer process
    event.sender.send('async-reply', 2);

// Listen

Read More

Must-have npm packages for Electron apps

Just a quick rundown of npm packages I tend to use in Electron projects, and what they're good for.
Note: I'm using it in my development package.json and they are key components in building and distributing apps.

Electron specific


Not much to say about this - Electron binaries for running your app. I avoid installing it globally but rather use it separately for each project. Keeps things clean,

Read More

Npm script, Electron and environment variables

In short

In app:

var isDev = process.env.TODO_DEV ? process.env.TODO_DEV.trim() == "true";  

In package.json let's say we have:

"start": "electron . --enable-logging --remote-debugging-port=9222"

With cross-env package:

"dev": cross-env TODO_DEV=true npm run start

or without dependencies:

"dev:mac": TODO_DEV=true npm run start,
"dev:win": SET TODO_DEV=true && npm run start

Longer version

If you're working with npm scripts (or

Read More

Auto-update failing on Mac OS


Try looking at response from server particularly Content-Length.

Longer version

I've been asked couple of times and also experienced failure with auto-updater on Mac OS. I've set correct URL, and tested it with curl and directly in browser and got response from server (both 200 and 204).

But somehow I kept getting error event from auto-updater. By investigating some more, it turned out to be problem in response

Read More

Library is not defined

The problem

App loads JS library, but still compiler says that:

jQuery is not defined.  

Most people will experience this with jQuery, but I had similar problems with few other libs as well.

The solution

This is caused because library will probably contain something similar to this:

if ( typeof module === "object" && typeof module.exports === "object" ) {
    module.exports = ...
} else ...

This will create problems since library will use module exports to create

Read More