Transparent window

To create transparent window in Electron, two steps are required:

  • When creating BrowserWindow, set transparent property, i.e.:
const BrowserWindow = require('electron').BrowserWindow;
myWindow = new BrowserWindow({
    name: "My app window",
    width: 500,
    height: 250,
    transparent: true,
    frame: false,
    toolbar: false
});
  • For your main window HTML file, define CSS to make background transparent:
html, body {
    background: rgba(0, 0, 0, 0);
}

That's it!

Read More

Electron + AngularJS - Packing and distribution

Update: This post was written for electron-builder v2. Time passed and stuff changed, so I wrote another series for electron-builder v3.

This is fourth part of introduction series to create application with Electron and AngularJS.

If you've missed, check how to add automatic updates.

Dive right in

As a final step in application development, we'll need to provide binaries for users to install. The easiest way is to use electron-packager

Read More

Electron + AngularJS - Adding automatic updates

Update: Stuff changed, so I've wrote a series on implementing auto-update with Squirrel.

This is third part of introduction series to create application with Electron and AngularJS.

If you've missed, first create sample application.

One of the requirement for developing desktop application nowadays is ability to provide automatic updates.

Let me tell you a story...

I used NW.js for some time, but I missed this functionality. I went on

Read More

Electron + AngularJS - Creating sample application

This is second part of introduction series to create application with Electron and AngularJS.

If you've missed, check out how to prepare dev environment.

For demonstration purposes, through the course of this introduction series I'll be progressively build Todo application.

The big picture

This Todo app does not (and probably) will not be perfect. What I want to concentrate is to go through underlying structure and how it works on

Read More

Electron + AngularJS - Preparing dev environment

This is first part of introduction series to create application with Electron and AngularJS.

Before starting to write any application code, we should install some prerequisites for running Electron apps as well as necessary libs.

Installing Node.js

First we need to have Node installed. This is required since we need npm (Node Package Manager) to run things. I suggest installing version 0.12.9 because of this and this

Read More

Electron + AngularJS

While working with Electron I've spent (read: wasted) some time browsing the web, reading the docs and finally diving into the code. Project is still fairly new and there are not much resources on the subject. So I'll try to help out newcomers by making this step-by-step guide from scratch to shippable app.

The plan

I'll be creating example application in Electron with AngularJS.

The execution

  1. Preparing dev environment
  2. Creating

Read More

Prologue (or how I chose Electron)

I've been a long time ActionScript developer, making cross-platform apps with Adobe AIR. The need came to port web application to desktop. That's how I came to work with NW.js and Electron.

First, I've made my research of the differences between two (check out this great post). Then I made proof-of-concept in both projects, just to see what hiccups I need to expect.

Electron is actively developed and supported

Read More