Aurelia - Electron


Aurelia Navigation Skeletons offer a good beginning into writing basic Aurelia Electron applications - but this is a step in the direction that is different from the official one ( I would like to make a quick poll to find out whether there are people in Aurelia Community that would be interested to participate in discussions, code snippets, best practices that could eventually lead to a “tighter” integration, using Aurelia CLI (see Build Angular Desktop Apps With Electron and stronger presence of Aurelia in Electron Community. I will make a similar pitch in that Community, as a common effort with member of both communities would make most sense.

Please talk to me :smile:


A first obvious question: has anyone tried to create an Aurelia-Electron app using Aurelia CLI ?


Don’t think you will have an easy time getting one running with the cli at the moment, see:

However there was someone who made one for electron-forge using one of the navigation skeletons, and if it works it’d be great if we could get the project listed on the official electron-forge site as a startup kit.

Here is the project: disclaimer that I have no idea if it works, and last updated in October.

When I last tried creating an electron project from the skeletons I had some troubles with 3rd party package imports (d3, jquery, moment, etc) so those will need to be tested as well.


Thanks for your post, @Malexion :smiley:

I had a pretty bad time with electron-forge (see, where I could be at fault here), so I will retry this approach.

I am also aware of the issues discussed in Do we have electron support aurelia cli, where few folks offer some solutions (which I plan to try).

I will post more about this as I move ahead. Stay tuned.


I would be interested in joining the efforts to make Electron and Aurelia an easier process. I have been using Electron with Aurelia and Aurelia UX, and while it works great, it took a lot of effort to get to where I am at now.


Great, @ZHollingshead - I will create the proper context for subsequent discussions and planning - and invite you there. The actual invitation should reach you by email (from GitHub) and accepting it should land you here


A quick update: the task of fitting Aurelia and Electron together the best possible way has at least two parallel tracks:

  1. “teaching” Aurelia CLI to create and manage Electron applications (with full support for all module loaders / bundlers of interest)

  2. creating the aurelia electron forge template

I believe that both these approachs are warranted, with the caveat that the first one depends on the aurelia CLI timing (the core team needs to add the ability to create all of the current navigation skeletons with support for all module loaders / bundlers; only then can we “nudge” them to start adding the cli based skeletons code as templates that I provided as an inspiration to the Aurelia CLI team (@JeroenVinke in particular) )


@ZHollingshead - I posted my quick comment on Electron-forge here. I will now look into details of the track 1 above.


We’ve created a large closed-source Electron app using Aurelia with jspm/SystemJS. I also hang around on the Electron Slack channel so have a good idea of the pitfalls whichever way you’re approaching it.

As far as we’ve worked out, in Electron there are two types of dependencies. Firstly, there are dependencies that work in the browser or those which are pure JavaScript. These can be safely bundled using your choice of build system and just work.

Everything else fits into the second category. This includes native modules (ie. those written in C/C++) for example node-serialport, ffi, usb-detection, etc and modules which include binaries or scripts which can’t be bundled (sudo-prompt is a good example of this). Modules in this second category have to be installed in node_modules using yarn add/npm install. This is especially important for native modules so electron-rebuild can pick them up and build them against the version of Electron you’re targeting. Some native modules come prebuilt for various platforms and others you’ll need node-gyp working for the rebuild to complete successfully.

How do you load from these two locations?


For SystemJS this is quite simple. For basic JavaScript libraries you load them like you would outside of electron and they’re pulled from your bundle in production:

import math from 'mathjs';

To load the dependencies in node_modules you have to hit electrons node require method which can be done in two ways:

// The obvious way
const serialPort = require('serialport');
// The 'special' systemjs way
import { serialPort } from '@node/serialport';

To get TypeScript typings working with the second option you’ll probably have to create some type definitions to help the compiler out:

declare module '@node/serialport' {
  import sp = require('serialport');
  export = sp;


As far as I understand, RequireJS is the default loader with the Aurelia CLI. This poses some problems because its require method clashes with the electron node one.

Some older electron issues seem to suggest that requirejs is not supported at all. I’m sure there are ways to get it working but the recommendation is to just not use RequireJS at all.


The Electron Slack channel is littered with posts asking how to get Webpack working with Electron and this is probably simply because Webpack config is complex enough without having to cater for the two runtimes in Electron.

I have no idea how to get it working but it might be worth looking at electron-webpack and the examples.

Other miscellaneous points

  • TypeScript projects with the latest versions of Electron should target esnext. These newer versions of Electron have native support for async/await which is measurably faster than the ES5/ES6 generated code.
  • I’m guessing there is an equivalent output for JavaScript projects?
  • Spectron is the easiest way to do e2e tests
  • Karma tests can be run in karma-electron so your test are run in the same environment as production
  • I’ll add more if I think of any…


@timfish Just to ack your post - it will take me some time to make my own comments meant to benefit other readers (we had 133 views so far :slight_smile:)

written a few days later
In order to keep this thread within manageable size, I will address a few issues you raised as response to my initial issue above.


I am not looking to add to the confusion, difficulty, and existing chaos, but I found an article that seems to easily solve this issue. Perhaps more experienced people than I can weigh in on it.


Based on a quick glance, having only my iPad at hand, this seems like a “silver bullet” solution. Remembering that the devil is in details, I cannot wait to try it


I’ve tried this and it works really well. I wrapped this page from a Aurelia CLI app into an Electron app and it looks like the image below (debugging view…the stuff on the right is obviously not there when you do a prod build).