Packaging a desktop application

Web applications are usually bundled and deployed to a hosting web server. On the other hand, desktop applications are bundled and packaged as a single executable file that can be easily distributed. Packaging our WYSIWYG application requires the following steps:

• Configuring webpack for production mode
• Using an Electron bundler

We will look at them in more detail in the following sections.

Configuring webpack for production

We have already created a webpack configuration file for the development environment. We now need to create a new one for production. Both configuration files will share some functionality, so let's start by creating a common one:

1. Create a webpack.dev.config.js file in the root folder of the Angular CLI workspace with the following content:

const path = require('path');
const baseConfig = require('./webpack.config');
module.exports = {
  ...baseConfig,
  mode: 'development',
  devtool: 'source...

Summary

In this chapter, we built a WYSIWYG editor for the desktop using Angular and Electron. Initially, we created an Angular application and added ngx-wig, a popular Angular WYSIWYG library. Then, we learned how to build an Electron application and implemented a communication mechanism for exchanging data between the Angular and Electron applications. Finally, we learned how to bundle our application for packaging and get it ready for distribution.In the next chapter, we will learn how to build a mobile photo geotagging application with Angular and Ionic.

Practice questions

Let's take a look at a few practice questions:

1. Which class is responsible for creating a desktop window in Electron?
2. How do we communicate between the main and renderer processes in Electron?
3. Which flags enable the use of Node.js in the renderer process?
4. How do we load Electron in an Angular application?
5. Which interface do we use for interacting with Electron in an Angular application?
6. How do we pass data to the main Electron process from an Angular application?
7. Which package do we use for filesystem manipulation in Electron?
8. Which library do we use for packaging an Electron application?

Further reading

Here are some links to build upon what we learned in the chapter:

• Electron: https://www.electronjs.org
• Electron quick start: https://www.electronjs.org/docs/tutorial/quick-start
• ngx-wig: https://www.npmjs.com/package/ngx-wig
• Webpack configuration: https://webpack.js.org/configuration
• ts-loader: https://webpack.js.org/guides/typescript
• ngx-electronyzer: https://www.npmjs.com/package/ngx-electronyzer
• Filesystem API: https://nodejs.org/api/fs.html
• electron-packager: https://www.npmjs.com/package/electron-packager
• concurrently: https://www.npmjs.com/package/concurrently

Adding a WYSIWYG editor library for Angular

We will kick off our project by creating a WYSIWYG editor as a Angular application. Use the Angular CLI to create a new Angular application from scratch:

ng new my-editor --defaults

We pass the following options to the ng new command:

• my-editor: Defines the name of the application
• --defaults: Defines CSS as the preferred stylesheet format of the application and disables routing because our application will consist of a single component that will host the editor

A WYSIWYG editor is a rich text editor, such as Microsoft Word. We could create one from scratch using the Angular framework, but it would be time-consuming, and we would only reinvent the wheel. The Angular ecosystem contains a wide variety of libraries for this purpose. One of them is the ngx-wig library, which has no external dependencies, just Angular! Let’s add the library to our application and learn how to use it:

1. Use the...

Integrating Electron in the workspace

The Electron framework is an npm package that we can install using the following command:

npm install -D electron

The previous command will install the latest version of the electron npm package in the Angular CLI workspace. It will also add a respective entry into the devDependencies section of the package.json file of our project.

Electron is added to the devDependencies section of the package.json file because it is a development dependency of our application. It is used only to prepare and build our application as a desktop one and not during runtime.

Electron applications run on the Node.js runtime and use the Chromium browser to render. A Node.js application has at least a JavaScript file, usually called index.js or main.js, which is the main entry point of the application. Since we are using Angular and TypeScript as our development stack, we will start by creating a separate TypeScript file that will be finally...

Communicating between Angular and Electron

According to the specifications of the project, the content of the WYSIWYG editor needs to be persisted in the local filesystem. Additionally, the content will be loaded from the filesystem upon application startup.

The Angular application handles any interaction between the WYSIWYG editor and its data using the renderer process, whereas the Electron application manages the filesystem with the main process. Thus, we need to establish an IPC mechanism to communicate between the two Electron processes as follows:

• Configuring the Angular CLI workspace
• Interacting with the editor
• Interacting with the filesystem

Let’s start by setting up the Angular CLI project to support the desired communication mechanism.

Configuring the Angular CLI workspace

We need to modify several files to configure the workspace of our application:

1. Open the main.ts file that exists in the src\electron folder...

Packaging a desktop application

Web applications are usually bundled and deployed to a hosting web server. On the other hand, desktop applications are bundled and packaged as a single executable file that can be easily distributed. Packaging our WYSIWYG application requires the following steps:

• Configuring webpack for production mode
• Using an Electron bundler

We will look at them in more detail in the following sections.

Configuring webpack for production

We have already created a webpack configuration file for the development environment. We now need to create a new one for production. Both configuration files will share some functionality, so let’s start by creating a common one:

1. Create a webpack.dev.config.js file in the root folder of the Angular CLI workspace with the following content:

   const path = require('path');
   const baseConfig = require('./webpack.config');
   module.exports = {
     ...baseConfig...

Summary

In this chapter, we built a WYSIWYG editor for the desktop using Angular and Electron. Initially, we created an Angular application and added ngx-wig, a popular Angular WYSIWYG library. Then, we learned how to build an Electron application and implemented a communication mechanism to exchange data between the Angular and Electron applications. Finally, we learned how to bundle our application for packaging and get it ready for distribution.

In the next chapter, we will learn how to build a mobile photo geotagging application with Angular and Ionic.

Practice questions

Let’s take a look at a few practice questions:

1. Which class is responsible for creating a desktop window in Electron?
2. How do we communicate between the main and renderer processes in Electron?
3. Which flags enable the use of Node.js in the renderer process?
4. How do we load Electron in an Angular application?
5. Which interface do we use to interact with Electron in an Angular application?
6. How do we pass data to the main Electron process from an Angular application?
7. Which package do we use for filesystem manipulation in Electron?
8. Which library do we use to package an Electron application?

Further reading

Here are some links to build upon what we learned in the chapter:

• Electron: https://www.electronjs.org
• Electron quick start: https://www.electronjs.org/docs/tutorial/quick-start
• ngx-wig: https://www.npmjs.com/package/ngx-wig
• Webpack configuration: https://webpack.js.org/configuration
• ts-loader: https://webpack.js.org/guides/typescript
• ngx-electronyzer: https://www.npmjs.com/package/ngx-electronyzer
• Filesystem API: https://nodejs.org/api/fs.html
• electron-packager: https://www.npmjs.com/package/electron-packager
• concurrently: https://www.npmjs.com/package/concurrently