Electron on Thorsten Hans

Electron CrashReporter - stay up to date if your app fucked up!

Fri, 03 Mar 2017 00:00:00 +0000

Every one of us knows about those situations. You ship your app to production and you’re instantly losing 10 pounds of weight 💪🏼 if nothing bad happens in the first 24 hours. You’re finally able to get some sleep, customers are happy, the manager is happy, you are happy!

But at some point in time your app will crash! It will definitely crash. No matter how professional you are, there are bugs! Customers will find them! And that’s okay.

Integrating Angular and Electron using ngx-electron

Fri, 24 Feb 2017 00:00:00 +0000

GitHub Electron makes crafting cross-platform desktop applications really simple. You can take any existing website or Single Page Application (SPA) and just wrap it into a native container. Those containers (powered by Chromium and Node.js) could easily be distributed to all major desktop operating systems like Windows, macOS or Linux.

On the other side is Angular as a full-blown application framework for building robust SPAs. Angular makes building SPAs fun and provides a rich set of APIs to get everything done, inside of the client. However, sometimes you need a deeper integration. For example, you want to call into Electron’s main-process to execute some Node.js script like reading files from a directory or do some other processing using Node.js. In those cases, you could utilize Electron’s APIs.

HTML5 notifications in electron apps with Angular

Fri, 22 Jul 2016 00:00:00 +0000

Within Electron apps, you can use HTML5 Notification API to keep users posted about events happened. Electron is bridging incoming calls to HTML5 Notification API to native notification APIs offered by all supported platforms.

Create a notification

Creating new notifications is straightforward. An instance of the Notification class is all you need. In the most basic shape, notification consists of a title. Additional metadata could be provided by providing an object as the second parameter to the Notification constructor, as demonstrated below with body.

Using Augury inside of Electron Apps

Sat, 02 Jul 2016 00:00:00 +0000

Writing apps using GitHub’s Electron is a reasonably easy task. The framework and community-driven tools are taking away much pain from you as a developer. Nevertheless, it is essential to have powerful debugging tools working in every environment. Augury (created by Rangle.IO) is currently the most powerful debugging tool for Angular developers. It’s a Chrome Extension that works perfectly inside of the Browser, in this post, you’ll learn how to use Augury inside of your Electron apps.

Angular and Electron - The definitive guide

Sun, 14 Feb 2016 00:00:00 +0000

Building cross-platform apps for desktop operating systems became simple compared to the past. With GitHub’s Electron is a framework available that takes away the pain for abstracting all common platform APIs from us as web developers.

Electron makes it easy to host Single Page Applications (short SPAs) within a native application container which is available for macOS, Linux, and Windows. When looking at Electron’s architecture, you will find two main counterparts.

NW.js and Electron compared

Tue, 09 Feb 2016 00:00:00 +0000

I’ve spent much time doing cross-platform development over the past year with a significant workload on cross-platform desktop development.

During that time, I found some customers and blog readers asking me if they should go for NW.js or if they should go direction Electron. There is no quick answer to this question. It’s this kind of question that has to be answered with It depends.

I’ve used both frameworks for real projects in the past, and both of them worked great for the given projects. Neither Electron nor NW.js is perfect (but they’re close to it) 😃. Each has its pitfalls. However, the communities behind those frameworks are fantastic and keep on answering quickly to questions popping up on GitHub or in tools like Gitter or Slack.

Setting Electron App-Icons for Windows from macOS

Sat, 16 Jan 2016 00:00:00 +0000

When building cross-platform apps using GitHub Electron, you may run into the same issue I did a few days ago. I wanted to build an Electron app for Windows and macOS directly from my host-system (also macOS). The build-process failed because setting the Windows App Icon didn’t work for me when building it from the Mac.

I was using gulp-atom-electron to build the apps automatically. It has a dependency on rcedit which is a small Windows executable that is responsible for updating either Windows Assemblies or Windows Executables to make resource changes from outside. GitHub itself has published a corresponding npm module which uses wine to execute wine rcedit app-name.exe --set-icon app-icon.ico if you’re executing the code on a macOS or Linux system.

Building an electron app using Angular Beta0 in TypeScript

Thu, 07 Jan 2016 00:00:00 +0000

You can build Angular apps using plain old JavaScript and TypeScript. I’ve been using plain JavaScript for the past Angular demonstrations, because I felt in love again with JavaScript after spending years with CoffeeScript (But that’s a different story). However, teams at Google and Microsoft were working together in these days to marriage Angular and TypeScript. If you don’t know TypeScript yet, go and learn it. It will change the way how you write Frontend stuff in the upcoming years. You can think of it as todays *JavaScript on steroids. It makes you more productive, it makes your code more robust, you’ve to write less plumbing because the TypeScript Compiler (TSC) generates all the good parts of JavaScript and knows about the edge-cases.

Angular goes cross platform with GitHub Electron

Mon, 16 Nov 2015 00:00:00 +0000

A while ago I’ve posted a sample on how to write an electron app using Angular 1.x with ES2015 and JSPM .

Now having more than 100 stars on GitHub, it seems to be quiet important for the community. That’s why I’ve decided to take this sample to another level.

Angular2 is becoming more severe with each day. That’s why I’ve decided to publish another electron sample targeting Angular2. Go and visit the repo right here on GitHub

Frontend Builds 3 - Cross Platform Desktop Builds

Thu, 15 Oct 2015 00:00:00 +0000

The Frontend Builds article series

Welcome to the third part of this article series. If you didn’t read the other parts, check them out now.

The idea

Frontend Apps can quickly be built for a various range of platforms. You can use Apache Crodova for building cross-platform mobile apps. For building cross-platform desktop apps, you can either use Electron or NW.js .

When Electron's window.setTitle keeps you driving crazy

Wed, 06 May 2015 00:00:00 +0000

As a reaction on my initial post about Electron, Ingo Richter came up with a comment on setting the window’s title. He described that he get errors when trying to set the window title to the app’s name.

browser-window is exposing the setTitle function and app is exposing the getName function. So my first impression was “well, that should be easy to realize”, but there is on common pitfall that I realized when trying to set the title of the window – which I’d like to share with you.

Packaging Electron apps as ASAR archive using Gulp.js

Tue, 05 May 2015 00:00:00 +0000

A couple of weeks ago I open-sourced a sample on how to build an electron app using Angular and ES6. The sample has become popular on Github, so I sat down and updated the sample a bit. All changes are about distributing the electron app.

https://github.com/ThorstenHans/electron-angular-es6

Instead of writing down all the bits, I’ve started Camtasia and recorded a short webcast.

I’ll explain all the required steps from 0 to the final app.asar package in these 11 minutes. Enjoy

Writing an Electron app using Angular and ES6

Mon, 04 May 2015 00:00:00 +0000

If you haven’t heard of Electron (formerly known as Atom Shell) you should check out it’s official website here .

In this post, I will not provide an introduction for all the different tools and frameworks. It’s more a walkthrough that should give you some hints on how to get things up and to run with the following stack.

Electron
Angular.JS
ES6 using Babel as transpiler
SystemJS as module-loader

Getting started

First of all, you’ve to ensure that all dependencies are installed on your system and a simple folder structure has been created for the sample project.