UniteJS –Angular / Aurelia / Preact / React / Vue to Electron in 4 mins

Including Build, Unit Tests, E2E Tests for development and production.

As we all know web pages are not the only destination for SPAs these days. Many applications are required to run directly on devices without the need for a browser.

This is a short guide which shows the facilities available in UniteJS CLI to create an Electron app using the framework of your choice (Angular/Aurelia/Preact/React/Vue).

The whole creation, build, test and package process takes only 4 minutes (excluding the node module installation, which we only do once)

For this example we are going to use npm for node module management, but yarn is equally as good.

Step 1

Install Unite JS CLI as a global package.

npm install -g unitejs-cli

Add the other global prerequisites.

npm install -g gulp

Step 2

Create an application with the configuration you want, see http://unitejs.com/#/cli for options, or use the online CLI generator http://unitejs.com/#/generator, for this example we will choose Angular TypeScript

unite configure --profile=AngularTypeScript --packageName=unitejs-electron-test --title="Electron QuickStart"

App created successfully.

Step 3

Let’s add Electron as a platform target, we do this now so we only have to install node modules once. You can do this at any point in your development process along with any other platform targets, you will just have to install the node modules if you add the platform later.

unite platform --operation=add --platformName=Electron

Platform added, well that was easy.

Step 4

Do the node modules installation (we don’t count this towards the total time as it’s a onetime deal).

cd wwwnpm install

All packages installed, let’s get on with the building.

Step 5

Before we build any code it’s nice to create the icon and themes for our app, this step can be skipped if you want. Modify the .svg files in the ./www/assetSrc/theme/ and then run.

gulp theme-build

Icons created, looking good.

Step 6

Simply build the app.

gulp build

Build successful, at this point you could run gulp serve and see the app in your browser, but that’s not our goal this time around, let’s continue.

Step 7

Let’s run the unit tests.

gulp unit

Success again, mmm we need to increase that code coverage.

Step 8

Install the selenium drivers for the E2E tests (again this is a onetime deal so excluded from the total time)

gulp e2e-install

Drivers installed, let’s get on with the E2E tests.

Step 9

Run the E2E tests.

gulp e2e

Looks like they worked as well, a good sign the code is loading and rendering properly.

Step 10

We now have a dev build, so let’s create a dev wrapper using Electron, this will point at the www folder, so whatever code is in there is what you will see in the Electron app (currently the dev build).

gulp platform-electron-dev

This task tries to determine the platform you are running on and creates a platform/architecture combination for Electron accordingly. It will download the Electron runtime for that platform and build it in the folder

./platform/electron/{platform}-{architecture}/.

The platform/architecture combinations can be overridden or you can have more than one by modifying your unite.json, see information in the ./www/readme.md for more details.

The icon is the default one for Electron, this makes it easier to distinguish this dev build from a production build which is properly themed with the correct icons.You should now be able run the executable in that folder and see the web page from your app appear, along with the dev tools.

Development Electron App

Party time!!!!

Step 11

All well and good for development but let us continue and create a production release, which is bundled, minified and that we could give to someone else.

First build the code for production.

gulp build --buildConfiguration=prod

Looks good, on we go.

Step 12

We can’t run the unit tests against a production build, but we can run the E2E tests.

gulp e2e

All working again, a good sign the bundling and minification hasn’t screwed anything up.

Step 13

Let’s create a production packaged Electron build.

gulp platform-electron-package --buildConfiguration=prod

During this task UniteJS will also generate icons for the platform/architectures you are creating from the ./www/assetSrc/theme/ .svg images.

When it is completed you should see the following files and folders

./packaged/{version}/electron/ – these are all the files that were packaged

And for each platform/architecture combination you will have.

./packaged/{version}/electron_{platform}_{architecture}/ - standalone electron build./packaged/{version}_electron_{platform}_{architecture}.zip – a zip of the build

This task uses the same process for deciding on the platform/architecture combinations as the platform-electron-dev step so you have multiple platform/architecture builds if you want.

Et voilà, a fully bundled, minified and styled Electron application in under 4 minutes.

Production Electron App

Conclusion

That’s all there is to it, choose your application framework and configuration options and within a few short minutes you can have Electron build ready to roll out on multiple platform/architectures.

To see this in action there is a GitHub repo at https://github.com/unitejs-examples/electron-quickstart , the repo contains just a .travis.yml script which performs all the operations above.

You can see the travis build log here https://travis-ci.org/unitejs-examples/electron-quickstart which reinforces just how fast the process is, and with no interaction whatsoever.

Martyn Janes @martynjanesSenior Developer UniteJS

More Information

For more information, documentation and the online CLI generator visit the web site at http://unitejs.comNpm: https://www.npmjs.com/package/unitejs-cliGitHub: https://github.com/unitejsGitter Chat: https://gitter.im/unitejs/discussTwitter: https://twitter.com/UniteJS