The previous chapter provided an introduction to Electron and covered various topics including a detailed view of the framework itself, the history of Electron, the architecture of Electron and some real-world examples of Electron use in production. We also looked at how to create a basic hello world application using Electron. Now we are ready to build more complex applications with real-world scenarios. The rest of this book is structured around the construction of a sample application that presents how to use Electron in real-life projects. The rest of this book is structured around some real-world examples on the electron and node JS that presents how to use Electron for your real-life projects.
Over the next three chapters, we will be creating a simple social media application client. This will help us to demonstrate the use of Electron APIs as well as to cover scenarios such as operating system access from Electron pages, remote API access using Node.js from a typical desktop environment, using local desktop based authentication, and so on. This chapter will demonstrate how to set up an Electron application with Angular 2 as the front end framework. Even though we are discussing Angular as a front end framework, any of the available front-end frameworks can be used instead of the Angular. Setting up an Electron application is simple, but when it comes with modern frontend frameworks, the process includes various tools and frameworks to get it run the first time. The majority of this chapter looks at Angular 2 and its setup with Electron. We will also discuss the following points:
- The problem domain and the technical stack used in the sample application
- Architecture and folder structure of the sample application
- Brief about development tools and the IDE used to develop the application
- Automated build process using popular task runners
- Configuring a module bundler to run the Angular 2 application
- Configuring and running the sample application skeleton using Webpack and Angular 2
- Creating and using an operating system-based user interface component, such as the menubar, using Electron