Building cross platform apps for desktop operating systems became really simple compared to the past. With GitHub’s Electron is a framework available that takes away the pain for abstracting all common platform APIs from us as web developers.
Electron makes it easy to host Single Page Applications (short SPAs) within a native application container which is available for MacOS, Linux and Windows. When looking at Electron’s architecture you will find two main counterparts.
- The Main Process which is responsible for providing platform specific API’s and taking care about the application lifecycle. We use Node.js to host custom functionalities and to provide instructions for main process.
- The Renderer Process is responsible for serving the user interface. Electron is using Chromium to achieve this. That said, you’ve to realize that your SPA will always run inside off a full fledged Chrome engine. (With all it’s advantages such as having rock solid Chrome Developer Tools available right inside of your desktop app)
Of course there are plenty of cool things built into Electron, but right now let’s move on and get started with actually building a cross platform desktop app using Angular2 and Electron itself.
Technically, there are no special requirements when building your first an app. For us (web developers), it’s just a regular frontend project. See the following lines of terminal code, which will create a project and initialize it with required files and some of the dependencies.
After executing those commands, your project directory should look like shown in the picture.
Creating the SPA
ng2-electron-sample folder in your favourite editor. First, we’ll add all required Angular2 related dependencies and some scripts for later usage to to the
Angular 2 beta6 is using the
typings module to pull type-definition files. Before installing all Angular2 stuff, specify the typings for
es6-shim inside of
typings.json. Now you can execute
npm i --no-progress from the terminal which will pull all Angular2 dependencies and the typings.
The SPA is really simple in our case, it will only act as technical demonstration for this post. So both, our
app.ts and our
boot.ts are straight forward
Last but not least there is the
index.html file which is responsible for displaying out app to the user.
Because we want to execute our SPA later in the context of an Electron container, it ‘s important to provide all script paths relative to the current document. Ensure that there is no leading slash for your script references.
Building the SPA
Now it’s time to give it a try, save all the files and move over to your terminal. By invoking the
frontend script, our Angular2 app will be built and we’ll use
live-server by executing
serve to serve it from the
Our SPA is done, now it is time to tell Electron how to behave when users start our App. Open
src/main/index.js in your editor and use the following code.
By default we enable Chrome’s Developer Tools within the
index.js as shown above. If you want to hide the DevTools by default, go and remove the
mainWindow.webContents.openDevTools() call from our instruction script.
index.js there is another required artefact to get everything working as expected. We’ve to provide a
package.json for out Electron app.
You can of course re-use the existing
package.jsonfrom our projects root directory, to keep things simple here we’ve created a dedicated
src/assetswith our initial script.
Let’s provide the required properties to
Generating the final output
Having everything implemented, it’s now time to add some new tasks to our build script
Try out the gulp tasks by invoking
Now all required files should be created within the
dist/electron-package folder. Let’s give it a try!
Execute the app
There are two different ways how you can start the cross platform app. First and simplest way is to use
electron-prebuilt which is good for development time.
From this point you can either execute the app manually or add another
npm script for that. Let’s keep it simple and start the electron app directly from the terminal by executing
Your app should now start and render our sample Angular2 app as shown below.
Having this mechanism for dev time is good, but not good enough when thinking about the your development workflow or handing out the app in this state to the user. Users want to have an executable and we as developers want to automate the creation of those executables of course.
Automate app packaging
You can use
gulp-atom-electron to automatically build the app. I’ve written another article on packaging Windows Apps from the mac including a custom app icon over here. But for now let’s keep the default icons and get everything up and running.
gulp-atom-electron and it’s dependency
Once installed, some more gulp tasks are required to automatically build the app for all three major platforms (MacOS, Linux and Windows).
When you start the build using
npm run apps, you can find all executables in the
packages sub directory.
Congratulations, you’ve just created a functional Angular2 App for all major desktop platforms. Leave a comment to share your opinion on this guide, feedback is always important to me.
There are several areas for improvements here, go and read my articles on Electron and Angular2 like ‘How to set Icons for Windows Executables from a Mac’, ‘everything about Angular2’ or ‘Gulp in deep series’.