Aurelia - Electron


#1

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 (https://electronjs.org/docs). 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:


#2

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


#3

Don’t think you will have an easy time getting one running with the cli at the moment, see: https://github.com/aurelia/cli/issues/217

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: https://github.com/starr0stealer/aurelia-electron-forge 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.


#4

Thanks for your post, @Malexion :smiley:

I had a pretty bad time with electron-forge (see https://github.com/electron-userland/electron-forge/issues/393, 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.


#5

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.


#6

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


#7

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) )


#8

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


#9

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?

SystemJS

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;
}

RequireJS

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.

Webpack

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…

#10

@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.


#11

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.

https://hackernoon.com/unitejs-cli-angular-aurelia-preact-react-vue-to-electron-in-4-mins-22aea20ba7f9


#12

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


#13

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).


#14

Bringing this back up to the top as I’m researching it now. I’m looking at Unite as I type this. Ultimately what my team is using electron for is to give an SDK to other developers. There will be bits of our main Aurelia application sprinkled in it so 3rd party developers can visually test their integration.

Unitejs still lists aurelia as not supporting webpack. I’m actually torn if i want to use webpack anyways even though all of my new work has been centered around webpack. Has anyone managed to get this process working with webpack??


#15

I see a few tasks at hands, some of which you can easily try out on your own:

  1. Verify the combo of Aurelia + SystemJS/RequireJS + Electron works
  2. Verify the combo of Aurelia + SystemJS/RequireJS + Electron + Unite.js works
    => This is your first milestone. If everything below this fails, you can still use this.
  3. Verify the combo of Aurelia + WebPack + Electron works
  4. Verify the combo of Aurelia + WebPack + Electron + Unite.js works
    => This is your ideal goal, isn’t it?

Give the tasks what you have. If you get stuck on some, perhaps people can jump in and help.


#16

Thanks for tasking me :confused: I’m not sure why you felt you needed to respond that way. Prior to the question, which is a legitimate question, I did test out UniteJS as someone above did (Already confirmed before I even tested it myself). So tasks 1 and 2 are done. I guess I’m doing alright???

Asking if something has been done is always good before going down the rabbit hole, which i don’t have endless hours at my disposal if it’s really not possible and someone far smarter with these tools already confirmed.


#17

OK sorry I missed the point. I thought you wanted to use Aurelia + WebPack + Electron + Unite.js and were willing to go for it. Because not you, but also anyone else, who wants the same thing will have to go through the same tasks. If you simply ask if someone has done it before, the answer probably is no.

Now back to the tasks, are we actually going to do this or just talk man?


#18

We use systemjs with Electron and bundle all the plain js modules. Anything that uses native modules is installed as an npm dependency and required via Electrons node require. This means once pruned for production, node_modules is relatively small so you can include that plus your bundle.

I want to try converting to webpack 4 and use the GitHub Desktop webpack config as a starting point. It bundles everything and copies the .node native files for you too. It also has examples for multiple entry points which is what we’re looking for. I need to try and get Aurelia working in that setup.


#19

I’m finally attempting to really get into electron right now. What our community needs is a simple application showing just some basic interaction with electron. Getting the web application to run inside of Electron is the easy part, actually taking advantage of electron is the part that is causing me pain.

If I actually get something working, I’ll submit it to GitHub

Update, I think i’ll just be using this project as my starting point https://github.com/DarkHarlock/aurelia-electron-app I’d say it’s a great starter project

Having webpack work for me really doesn’t matter. The code that will be shared from my real web application to the electron portion I’ll build as a plugin that can be consumed by both.


#20

I made solid progress using the DarkHarlock starter app. @adriatic suprisingly kendoui is what is giving me all kinds of problems. I haven’t dug too deep yet as I was just excited to see my work running in electron. All of the kendo controls render using the bridge, but when you try to interact with them the console is filled with errors. Certainly seems like it’s jquery related.