How to: Overcome your Electron and Windows 10 headaches

Electron makes building native apps with web technologies a breeze. Doing it under Windows, however... By Andy Soell
Thu, Apr 14, 2016
Filed under: howto, electron, desktop, windows, nodejs,

Electron is an impresive desktop application development framework brought to us by the lovely folks at GitHub. If you’ve ever thought, “wouldn’t it be nice if I could use web technologies to power a desktop application,” this is what you’ve been waiting for. HTML and CSS powers the user interface and JavaScript powers the internals through the Node.js runtime. This means that you can use whatever flavor of CSS and HTML preprocessor you like as well as having the full power of JavaScript and NPM available to you for writing your desktop application. Electron powers many of the most popular desktop applications being written today, including Slack, Microsoft’s Visual Studio Code, and Desktop WordPress.

We’ve been spending the past few weeks working with a client to launch a new application using Electron, and we’ve learned quite a bit along the way. Most of our development is typically done using Apple hardware, but given that this product was a cross-platform effort we had to get our Windows chops up to speed to make sure that the final product looked great for users of either system. Building an Electron application under Windows 10, however, proved to be quite a bit more frustrating than we had expected.

The Problem

When we first fired up our application in Windows and naively thought that maybe it would just work without any major changes, we were quickly shown that wouldn’t be the case. We spent hours and hours going down a rabbit hole testing multiple versions of Node.js, NPM, Python, and Visual Studio all in an effort to eliminate one recurring, taunting error message:

npm ERR! somepackage@1.0.0 install `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the somepackage@1.0.0 install script 'node-gyp rebuild'.
npm ERR! This is most likely a problem with the somepackage package,
npm ERR! not with npm itself.

Oh, node-gyp, you elusive bastard. Like me, you may not know exactly what node-gyp is, or why it’s failing to build, but the point is that it is failing to build, and that’s preventing your app from building even for testing purposes. We spent hours tracking this problem down, in the hopes of getting our application working. I’m hoping to save you those hours and help you get your Electron application compiled and running in Windows 10 is a few easy-to-follow steps.

Let’s start installing

I’m crossing my fingers for you here that you’re working with a clean slate; As I mentioned earlier, we primarily write our applications in an OS X environment, so for our Windows work we just downloaded the Microsoft Edge on Win 10 Stable virtual machine straight from Microsoft. This is a timed demo version of Windows 10 that is specifically designed to let non-Windows developer use and test their applications on Windows. We just downloaded the image formatted for VirtualBox so we could start with a vanilla, base Windows install.

Visual Studio

To perform the test and build processes, you’ll need some developer tools from Microsoft. Download the Visual Studio Community Edition package and install it carefully. There are a few optional components you will want to install, so don’t just breeze through the setup process without reading.

Select the “custom” installation method, and then be sure to check the boxes to install the optional “Visual C++” and “Python Tools” components.

The actual installation will take a while. Let it continue to run in the background while you move on to the next steps.

Node.js

Electron is powered by Node, so we’re going to need to get that installed on the system as well. If you’re a heavy Node developer, you likely have your version manager of choice—feel free to install NVM or nodist at this point, but to keep things simple I just downloaded and ran the installer straight from NodeJS.org

NPM

Now that Node.js is installed, we’ll need to install the Node Package Manager so that you can make use of the modules that Electron needs—and very likely additional modules that you’ll incorporate into your application. Download the latest stable version from the NPM GitHub repository and install it.

Python

Now would be a good time to pop back over the Visual Studio installation and see how it’s going. It’s going to need to wrap up before this next step, so if it still has some time left on it maybe go grab a coffee.

Once the Visual Studio installation is complete, grab the Python 2.7 installation file from Python.org. The installation, again, is pretty standard and you can mostly just click through it.

Finally

Before we start building, we need to set on system variable. If you’re not familiar with how to do this, Windows doesn’t make it super easy to find where this is done. The easiest way, if you’re used to working with a terminal or command prompt, it to simply type setx GYP_MSVS_VERSION 2015. After a few seconds you should get a response of SUCCESS: Specified value was saved

If you’d rather stick with the GUI, we can do that too; Follow along with me:

  1. Click the start menu, followed by settings.
  2. Click About in the left menu, followed by System info on the right.
  3. Click into Advanced system settings.
  4. Finally, click the Environment Variables button at the bottom.
  5. Under System Variables click the New button
  6. Enter GYP_MSVS_VERSION for the Variable name and 2015 for the Variable value and click OK
  7. Click OK on all the dialogs back to the settings panel, and you’re all set.

Optional, but recommended

Git

If you’re not using version control for your software projects, getting an Electron app to build is the least of your troubles. Let’s make sure Git is installed on the system so you can pull your project in from version control and then check back in any changes that you need to make to get it Windows-ready. Download the latest Windows build from https://git-scm.com/download/win and install it.

Windows Power Shell

If you’re used to using OS X’s Terminal or something like it, you’ll find yourself quickly frustrated with Windows’ Command Prompt. If it’s been a while since you’ve used Windows, you’ll be pleased to find out that they also include a much power powerful command line utility called Windows Power Shell, and it can be found in the Start Menu under All Apps › Windows PowerShell. Be sure to start that up when it’s time to clone your project and start building.

Build time

This is it. The big moment. Fire up PowerShell, clone your code to a local folder, and give npm install && npm start a try. After a minute or two of downloading and installing NPM modules, if everything went as expected, you should see your beautiful Electron application loading up in your Windows environment.

Electron makes writing and building native desktop application using familiar web technologies stupid easy, but that doesn’t mean everything about it is headache-free. Hopefully this helps get your application that much closer to ready-to-run in Windows 10 so you can spend your time tracking down the subtle differences on the platforms instead of pulling out your hair just to get it running at all.