In this article we are going to learn quickly and easily how to launch a desktop application with Angular 11 and Electron .
Although what I am going to show in this article is basic, I recommend that before reading you are familiar with Angular , TypeScript and JavaScript.
The application will consist of two basic parts, an Electron-Angular communication test and data saving locally with electron-store.
I leave you a small index of the contents that we are going to see below:
Index
- Start a project in Angular
- What is Electron and how to install it
- Electron startup
- ipcMain and ipcRenderer
- Electron-store bookstore
- conclusion
Start a project in Angular
Probably the most important step of all. How to make an Angular application, if it doesn’t exist?
The first thing we must do is install Angular on our machine if we have not already done so:
npm install -g @ angular / cli
Once ready, we just have to start a new project with the following command:
ng new angular-electron
The name of the application can be anyone, in this case I have put the name I want for this project. When the project has been created successfully, we can start with the next step.
What is Electron and how to install it
Now we just need to install Electron to make it part of the project we just created.
But first, what is Electron? Electron is an open source framework used to create cross-platform desktop applications. It uses Node.js on the server side and Chromium for its interface. We install it with the following command:
npm install --save-dev electron @ latest
Once installed, we will have the latest version of Electron in our project.
Well! Now everything is ready to go into the matter.
Electron startup
Everything is ready, now we just have to make it work. The first thing we need to do is create the file main.js, which will run the main process.
Typically, the script running in the main process controls the life cycle of the application, displays the graphical user interface and its elements, performs native operating system interactions, and creates Renderer processes within web pages. An Electron application can only have one main process.
So, we believe main.js the root of the project, in this case it is ” angular-electron “:
Do not be scared, if you read carefully, you will realize that this code only creates a new window with some properties, which, in this case, I have considered appropriate for the occasion.
Ok, now that we have the main Electron process ready, we have a couple more things to do before the application will work properly.
What we must do next is go to the file package.jsonand add the following lines:
“main”: “main.js”It specifies the file that will be the main process for Electron, while it "electron": “ng build && electron .” is the command that we will use to start the application more easily.
The latter is the case since Electron is started from the “dist” folder, when a project is built.
The next thing we must do is edit the file angular.json to change the path of the “build” and match the one we have put in main.js: file://${__dirname}/dist/index.html Although we can also do it the other way around and change the path of main.js.
In red the previous configuration, in cyan, the new configuration.
And finally, we must change the href from “base” index.html of the Angular file , we change “/” to “./” since Electron works with a file system and not with domain paths.
Although there are more ways to configure the latter, with this one we are fine as we remember, it is a basic tutorial.
Launch the desktop app
Ready! We have the application ready to start, now we just have to execute the command that we configured previously:
npm run electron
And with this, the application should open and work properly.
In this case, I had already created application components for the following points in the article, but it does not affect the execution of the desktop application.
ipcMain and ipcRenderer
Now that we have our app working, we must know the following concepts that are necessary to create an Electron application that is useful.
If we have a desktop app, it is almost certain that we also want it to interact with the system, in a way that a regular browser web application cannot. Electron takes care of this, but how do we get Angular and Electron to communicate? Well, the ipc is the answer.
ipcMain : It communicates asynchronously from the main process to the rendering processes. That is, from the main.js to the rest of the app.
ipcRenderer : Communicates asynchronously from a rendering process to the main process. That is, from the app to the main.js.
Easy, right?
Now how do we use them? Well, the first thing we are going to do is create an Angular service that is in charge of handling the ipcRender and so we can easily use it from any component:
First, we import the IpcRenderer class . After this, in the constructor of the service we check that it window.require is available, if so, it means that the application is working with Electron, and therefore we can load the ipcRenderer .
Second, we add methods ipcRenderer we will use in this case are on, once, send and removeAllListeners. Relax, now I explain them.
Now that the service is ready, why don’t we test it on a component? In my case, I created a component called home that will be the main component of the application, which consists of a simple button, which, when pressed, will send a signal to main.js and this will return a response that will be printed on the screen.
You can see the components in my GitHub repository that I will leave at the end of the article.
As you can see, there is the function ping(), which will be the one that will send the “ ping ” message through the “ message ” channel to the main process. Now let’s go back to main.js see how we make it receive the message:
First, let’s not forget to add ipcMain in the declarations.
Later, we will add this in main.js:
ipcMain.on ("message", (event) => event.reply ("reply", "pong"));
This will make ipcMain listen to the “ message ” channel and when a message arrives, it will reply to another, which in this case is “ pong ”, through a different channel called “ reply ”.
Now let’s go back to our home component.
As you can see, I have added several new things. The first thing I have done has been to add a new one on in the function ping() that serves to listen to the answer that will come from main.js the ” reply ” channel .
Once you get the answer and verify that it is “ pong ”, the word “ pong ” will be displayed on the screen . As for ChangeDetectorRef, in this case it is necessary since the communication between the ipc happens outside the “ NgZone ”, causing the component not to be updated and the word is not displayed on the screen unless we manually indicate one detectChanges().
Once this is done, when the component is destroyed we make sure to erase the channel’s listeners, since they can cause memory leaks.
It is done! The application communicates with Electron perfectly. You can use this to start creating more complex or system-interactive communications.
Electron-store library
Finally, I wanted to show you this library that allows you to easily work with a local storage for Electron based on key-value.
With this library we can easily save application data, user data, scores for local video games, or anything else we may need.
To get started, it’s as simple as installing the library:
Now, we just have to create an Angular service, as with the ipcRenderer , to make it easier to use throughout the app.
Once again we perform the same checks and write the methods that we are going to use, in this case get(), to obtain a value, and set(), to set a value and a key. (the value will be replaced If the key already exists).
Now in the file main.js
If we are clear about what data we want to save, we can establish default values in main.js, in this case, the clicks that will be the score of the minigame that we are going to test. (We can also set the default data in the Angular component).
Now let’s go to the game component, which is based on a button and it saves how many times it has been pressed.
The component has three main parts, it ngOnInit()is in charge of recovering the clicks saved locally, it addClicks()is called every time the button is pressed, and it save()saves the score.
As you can see, it is very simple to use.
In this way, it does not matter if we exit the application, the score will be saved.
If you want to know more about electron-store, visit
https://www.npmjs.com/package/electron-store
conclusion
As you have seen throughout the article, creating a desktop application is easier than ever thanks to Electron and Angular, with ipc communication and a local storage system. And this is just a quick and basic look at everything they can offer us.
Here is the repository used for the development of the test application: https://github.com/rubencfu/Angular-electron-example
Also Read: Apple M1
