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

Building and deploying application

Article updated to use electron-builder v4+

This article is part of the Distributing Electron apps series.

Goal

Make one-liner to build and deploy your app!

Cut to the chase

Put this in development (root) package.json:

"scripts": {
    "dist": "build -mwl --x64 --ia32",
    "prerelease:osx": "rm -rf release/osx && mkdirp release/osx",
    "release:osx": "cp -rv dist/osx/*.{dmg,zip} release/osx && PACKAGE_VERSION=$(cat app/package.

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

Publishing for Windows

This article is part of the Distributing Electron apps series.

If you're looking to publish for OS X, check out previous post.

What's the endgame?

To build EXE installer for our app and be able to automatically update.

Creating installer

If you followed through article where I explained electron-builder, you're mostly done to build distributable for Windows.

Let's clear some things first. It's not the same if you run electron-builder

Read More

Publishing for OS X

This article is part of the Distributing Electron apps series.

If you've missed, I suggest reading explanation of electron-builder first.

What's the endgame?

To build DMG for our app and be able to automatically update.

Creating installer

If you followed through article where I explained electron-builder, you're mostly done to build distributable for OS X.

Electron-builder is going to generate couple of things:

  • Application executable (.app)
  • Squirrel update package (.zip)

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

Distributing Electron apps

For couple of days I've been looking at building Electron apps for OS X and Windows. Finally I made some progress and have successfully created installers with automatic updates for both platforms. Although there is some official documentation and some articles, I wasn't able to get it to work OOTB. That's why I decided to make in-depth series about it.

The plan

I plan to add Squirrel updater to my

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

Doing infinite-scroll properly in AngularJS

Recently I wanted to make infinite scroll with Angular Material for project that I'm working on. I wanted to have header and footer with content area which is going to host content in md-list.

Note: This post is using md-list and md-list-item for demonstration purpose but you can ng-repeat anything you'd like.

I stumbled upon ng-infinite-scroll, which offers infinite scroll for AngularJS. And it worked great when I had a

Read More