Earlier this week I was working with a desktop app (which I can’t talk about… yet) that had an Ionic-look to it. On a whim, I opened up the package contents and discovered it was an Electron app. If you’ve never heard of it, Electron is an open source project that lets you build desktop apps (for Mac, Windows, and Linux) using web technologies. The last time I did anything in this space was with Adobe AIR, which was years ago. I’ve played with Electron a tiny bit, but I had not tried to use Ionic with it so I thought I’d give it a shot. Before digging in, I want to bring up two very important points.
First, I’ve spent maybe three hours looking into this subject, and obviously have not built a production application yet. This post focuses on some of the things I ran into while testing things out, but it is safe to assume more issues probably exist. As time goes on I’ll probably blog other things to consider and I hope my readers will share their own discoveries.
Second, while Electron makes it easy to build a desktop app, I cannot stress enough that you need to remember that app development is not the same as web development. When I talk about Cordova and how it makes it easy to use the web to build mobile apps, I try very hard to remind people that building a mobile app is nothing like building a web page. Repeat that after me: “Building a mobile app is nothing like building a web page.”
Ok, so with that out of the way, let’s talk shop.
The first thing I did was to see what would happen if I took a generic Ionic app and just plain ran it under Electron. To do that, I created a new Ionic app and used the -no-cordova flag. If you aren’t aware, you can tell the Ionic CLI to create a new project and skip including all the Cordova bits. You still get a bunch of extra stuff like the bower file and gulp script, so I simply copied out the www folder.
Then, following the Electron quick start, I added a package.json file and main.js. For my main.js, I copied their code exactly, but removed the bits to open dev tools. (More on that in a bit.)