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

Sharing between main and renderer process

In short

In main process:

global.something = value;

In renderer process:

const remote = require('electron').remote;
var something = remote.getGlobal('something');

Longer version

To use same instance between main and renderer process, you can use global object from Node. To demonstrate this, let’s add logger to sample Todo application.

In main.js we’re going to create logger instance which can be required and used in all other renderers.

Read More

Boosting dev productivity

You can speed up your development process by using live reloading to see your app in action on each change.

First, let's add package:

npm i live-reload --save-dev  

Note: There are a lot of packages with similar name, so be sure to use this exact one.

In your index.html add this:

Now, we're going to need to fire up reload server along with our app. What I do is

Read More