Harmonic Part 1 - Turning a Web App into a Desktop App with Electron
This post is a first in a series of how to use Electron (formerly atom-shell) to turn a Web Application into a Desktop Application. For this tutorial, We’ll be working on a cross-platform desktop client for Google Play Music. This first post will focus on setting up your application, and loading the webpage into the window.
As someone who switched over from Spotify, the only annoyance I’ve had with Google Play Music is the lack of a desktop client. There are already clients out there for Linux and OSX, both of which I use, but nothing for when I’m on my Windows PC.
That’s where Harmonic comes in.
Harmonic is pretty simple really. It loads in the Google Play Music webpage into a window on your desktop, and then registers global keyboard shortcuts to let you control playback without having to focus the window. If you want to skip the tutorial and just look at the code, you can check it out on GitHub.
The first step is to generate the package.json file. For this, we use NPM.
You can just push ‘enter’ to use the defaults for all of the questions. unless you want to add some more details. This will generate the package.json file, which will look something like the one below.
Now we can add a few extras to this file to make life a bit easier.
First, add the following to the ‘scripts’ section.
This gives you a shortcut for starting the app from the commandline.
Next, use NPM to install Electron into the app.
Then, install Electron globally to let you start Electron from the commandline
After that, you should end up with a file that looks like this
The index.js file is the entry point for the app. It’s defined in the package.json file, so if you want to rename it, make sure you update your package.json.
This file controls the main thread of the application. It’s responsible for spawning the other processes, and controlling interactions with the operating system. In the example, we set up the required handlers for starting and stopping the app, as well as spawning a window and loading in the content.
Now, there’s just one file left.
The index.html file is the content that is loaded into our BrowserWindow. It’s a very simple webpage, with only one element, the (webview)[https://github.com/atom/electron/blob/master/docs/api/web-view-tag.md].
Starting your app
Now that all your files have been built, the only thing left to do is to run it. Open up a terminal, and type
This will open the app, and load Google Play Music into the browser. You’ll asked to sign in, and from there you can start using it just like you do in the web browser.
You can view the code from this tutorial on GitHub