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 for options, or use the online CLI generator , for this example we will choose Angular TypeScript http://unitejs.com/#/cli http://unitejs.com/#/generator 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 , the repo contains just a .travis.yml script which performs all the operations above. https://github.com/unitejs-examples/electron-quickstart You can see the travis build log here which reinforces just how fast the process is, and with no interaction whatsoever. https://travis-ci.org/unitejs-examples/electron-quickstart Martyn Janes @martynjanesSenior Developer UniteJS More Information For more information, documentation and the online CLI generator visit the web site at Npm: GitHub: Gitter Chat: Twitter: http://unitejs.com https://www.npmjs.com/package/unitejs-cli https://github.com/unitejs https://gitter.im/unitejs/discuss https://twitter.com/UniteJS
![Martyn Janes [UniteJS]](https://hackernoon.imgix.net/fallback-profile.png?auto=format&fit=max&w=96)
![Martyn Janes [UniteJS] HackerNoon profile picture](https://hackernoon.imgix.net/fallback-profile.png?auto=format&fit=max&w=3840)
![16 JavaScript Protips [2020 Edition]](https://hackernoon.imgix.net/drafts/q1n3yqk.png?auto=format&fit=max&w=3840)
