Electron Projects

Build over 9 cross-platform desktop applications from scratch

Denys Vuika

• Publisher: Packt Publishing
• Year: 2019
• Print ISBN: 9781838552206
• eBook ISBN: 9781838553104
• Edition: 1
• Topic: Computer Science
• Subtopic: Desktop Applications
• Index: Computer Science

A project-based guide to help you create, package, and deploy desktop applications on multiple platforms using modern JavaScript frameworks

Key Features

• Use your web development skills with JavaScript and Node.js to build desktop applications for macOS and Windows
• Develop desktop versions of popular mobile applications that are similar to Slack, Spotify, and more
• Design desktop apps with automatic updates and real-time analytics capabilities

Book Description

The Electron framework allows you to use modern web technologies to build applications that share the same code across all operating systems and platforms. This also helps designers to easily transition from the web to the desktop. Electron Projects guides you through building cross-platform Electron apps with modern web technologies and JavaScript frameworks such as Angular, React.js, and Vue.js.

You'll explore the process of configuring modern JavaScript frameworks and UI libraries, real-time analytics and automatic updates, and interactions with the operating system. You'll get hands-on with building a basic Electron app, before moving on to implement a Markdown Editor. In addition to this, you'll be able to experiment with major JavaScript frameworks such as Angular and Vue.js, discovering ways to integrate them with Electron apps for building cross-platform desktop apps. Later, you'll learn to build a screenshot snipping tool, a mini-game, and a music player, while also gaining insights into analytics, bug tracking, and licensing. You'll then get to grips with building a chat app, an eBook generator and finally a simple digital wallet app.

By the end of this book, you'll have experience in building a variety of projects and project templates that will help you to apply your knowledge when creating your own cross-platform applications.

What you will learn

• Initialize Node.js, Node Package Manager (NPM), and JavaScript to set up your app
• Integrate Phaser with Electron to build a simple 2D game
• Improve app quality by adding an error tracking system and crash reports
• Implement group chat features and event handling capabilities using Firebase
• Integrate a WordPress-like rich-text editor into your app
• Build Electron applications using a single codebase

Who this book is for

This book is for JavaScript developers who want to explore the Electron framework for building desktop apps. Working knowledge of modern frontend JavaScript frameworks and Node.js is assumed. No prior knowledge of desktop development is required.

Integrating with Angular, React, and Vue

With the rapid evolution of web technologies and frameworks, we no longer need to build our web applications from scratch. There's a vast variety of component libraries, feature libraries, extensions, and frameworks that combine the most reusable building blocks for our needs.

In this chapter, we are going to focus on three essential frameworks that most modern developers use, as follows:

• Angular, which is backed by Google
• React, which is backed by Facebook
• Vue.js, which is backed by Evan You and its sponsors

You are about to go through the process of setting up three different projects for each web framework. As part of this practical exercise, you will learn how to configure the live reloading feature, integrate UI toolkits and component libraries, and set up application routing.

In this chapter, we will cover the following topics:

• Building an Electron application with Angular
• Building an Electron application with React
• Building an Electron application with Vue.js

Let's get started!

Technical requirements

To get started with this chapter, you will need a standard laptop or desktop running macOS, Windows, or Linux.

The software that you'll need to have installed to complete this chapter is as follows:

• Git, a version control system
• Node.js with node package manager (NPM)
• Visual Studio Code, a free and open-source code editor

You can find the code files for this chapter is this book's GitHub repository: https://github.com/PacktPublishing/Electron-Projects/tree/master/Chapter03.

Let's start with the Angular framework.

Building an Electron application with Angular

This section assumes that you already have experience with the Angular framework. To find out more, please refer to the Angular Quickstart section at https://angular.io/guide/quickstart.

To get the application up and running fast, we are going to use the Angular CLI. The Angular CLI is a project that's maintained by the Angular team. It's described in the official documentation (https://angular.io/cli#cli-overview-and-command-reference) as follows:

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as Angular Console.

You can install the latest version of the Angular CLI through the NPM package manager. Typically, developers install it as a global tool so that they can generate a new project in any folder using the command-line tool or Terminal application.

To find out more about the Angular CLI, and globally get a list of all supported commands with a detailed explanation of what they do, please go to https://angular.io/cli.

Run the following command to install the CLI:

npm i -g @angular/cli@latest

The output should look similar to the following:

/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng
+ @angular/[email protected]

The NPM package manager downloads and installs the Angular CLI and all its dependencies. Upon completion, it also registers a new global ng command that you can use anywhere.

Now, let's create our Angular project scaffold, which we will use with the Electron shell.

Generating our Angular project scaffold

In this section, we are going to learn how to set up a new project that follows Angular's development practices. Let's get started:

1. Run the following commands to generate a new Angular project called integrate-angular:

 ng new integrate-angular
 cd integrate-angular

The Angular CLI tool usually asks a series of questions to clarify what extra features you want to have in the resulting application.

2. If you're asked about routing support, type Y and press Enter:

 Would you like to add Angular routing? (y/N)
 Y

3. Next, if the tool asks you about the stylesheet format, choose SCSS, as shown in the following code:

 Which stylesheet format would you like to use? (Use arrow keys)
 SCSS

4. The output of the preceding code is as follows:

Note how the Angular CLI generates a set of files for you. The tool provides you with various ignore rules for NPM and Git inside the .gitignore file, configuration files for Typescript and the Karma test runner, and even a set of unit and end-to-end tests as part of the initial scaffold.

5. Check out what the package.json file looks like, especially its general information and the scripts section:

 {
 "name": "integrate-angular",
 "version": "0.0.0",
 "scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
 },
 }

6. The Angular CLI also performs dependency library installation, so all you need to do is run the following command to get your web application up and running:

 npm start

Historically, every web app that we generate with the help of the Angular CLI runs on port 4200 by default. You can quickly change the port in the future, but for now let's stick to the defaults.

7. Launch your preferred browser and navigate to http://locahost:4200. You should see a landing page ca...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• About Packt
• Contributors
• Preface
• Building Your First Electron Application
• Building a Markdown Editor
• Integrating with Angular, React, and Vue
• Building a Screenshot Snipping Tool
• Making a 2D Game
• Building a Music Player
• Analytics, Bug Tracking, and Licensing
• Building a Group Chat Application with Firebase
• Building an eBook Editor and Generator
• Building a Digital Wallet for Desktops
• Other Books You May Enjoy