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

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
    });
    mainWindow.loadURL(`file://${__dirname}/index.html`);
});

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

// Listen

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

Electron 1.0 released!

But you probably already know...

Jump to their website, check out new docs and tools. Also, be sure to read their blog post.

I'm not writing this to link to announcement only, of course. I'd like to warn you guys about breaking changes in compiling.

If you required electron modules like this:

const remote = require('remote');  
const app = require('app');  
const autoUpdater = require('auto-updater');  

change it to require('electron').moduleName

Read More

Electron-builder explained

This article is part of the Distributing Electron apps series.

This article was updated to demonstrate working with electron-builder v5.

Go-to tool for building Electron apps is electron-builder. When I first tried to build app, documentation was pretty scarce so I had to do a bit of digging myself. Docs are a bit better now, but I'll try to explain it in more detail and point out some gotchas.

Electron-builder

Read More

Debugging Electron in Visual Studio Code - revised

Last time I wrote about debugging Electron apps in Code, I found that it is possible only to debug main process. But not much code will be in your main process, but in renderers, so it would leave you to fire up Chrome dev tools and work it from there.

On Electron website, there are instructions how you can debug your app, but it is enabled only for main process.

Read More

Using logger with Electron and AngularJS

Angular provides $log for logging, but if you'd like to use different logger (and use it throughout your Electron app), you will have to handle it bit more differently.

Motivation

I'd like to have single logger to output logs to console and external file. It has to work in both AngularJS files and Electron files.

For my project, I've chosen to go with Winston which seems pretty powerful and stable,

Read More

Proper tray icon

I've been playing around with tray icon so I thought to write down couple of thoughts.

Not to repeat the code, you can check out how to use it in documentation.
BUT, be aware of couple of things though...

Straight to the point

var platform = require('os').platform();  
var trayImage;  
var imageFolder = __dirname + '/assets/images';

// Determine appropriate icon for platform
if (platform == 'darwin') {  
    trayImage = imageFolder + '/osx/trayTemplate.png';

Read More