Hello Guys 🙂

This project is forked from https://github.com/SamirHodzic/ngx-youtube-player , I’ll customize it to modify the color with youtube color and install all dependencies that allow you to create a Desktop app with electron js, for more details about electron I advise you to visit this links

In this lesson, you will learn how to build native desktop apps with Angular and Electron. You might be surprised how easy it is to start building high-quality desktop apps for any platform, or even port your existing Angular app to native desktop platforms.

This lesson covers the following topics:

  1. Configure Electron 1.7 with Angular 7.x.
  2. Build a simple timer app in Angular.
  3. Package the app for install on Windows 10, macOS, and Linux Ubuntu.

You can obtain the source code for this project on Github.

Initial Setup

Let’s kick things off by cloning the project from Github, move inside the project and install all dependencies  :

$  git clone https://github.com/radhouen/ngx-youtube-player.git

$ cd ngx-youtube-player

$ npm install

You can install Electron in the Angular development environment.

$ npm install electron –save-dev

Configure Electron

The next step is to configure Electron. There are all sorts of possibilities for customization and we’re just scratching the surface.

# main.js

Create a new file named main.js in the root of your project – this is the Electron NodeJS backend. This is the entry point for Electron and defines how our desktop app will react to various events performed via the desktop operating system.

The functioncreateWindow defines the properties of the program window that the user will see. There are many more window options that facilitate additional customization, child windows, modals, etc.

Notice we are loading the window by pointing it to the fileindex.html in the folderdist/. Do NOT confuse this with the index file in the foldersrc/. At this point, this file does not exist, but it will be created automatically in the next step by running ng build --prod

That’s it for the Electron setup, all the desktop app magic is happening under the hood.

Custom Build Command

The deployed desktop app will be an Angular AOT build – this happens by default when you run ng build --prod. It’s useful to have a command that will run an AOT production build and start Electron at the same time. This can be easily configured in the package.json file.

Run the command

You can run your angular app as a native desktop app with the following command.

$ npm run electron-build

At this point, you can run the command (it will take a few seconds) and it will create the dist/ folder and will automatically bring up a window on your operating system with default Angular app.

This setup does not support hot code reloads. Whenever you change some Angular code, you need to rerun the electron-build command. It is possible to setup hot reloads by pointing the window to a remote URL (such as https://localhost:4200) and running ng serve in a separate terminal.

Building the Angular App

Now we need to build an Angular App that’s worthy of being installed. I am building a single page timer that will animate a progress circle, then make a chime sound when complete.

Packaging for Desktop Operating Systems

Now that we have a decent app ready for desktops, we need to package and distribute it. The electron packager tool will allow packaging our code into an executable for desktop platforms – including Windows (win32), MacOS (Darwin), and Linux. Keep in mind, there are several other electron packaging tools that might better fit your needs.

$ npm install electron-packager -g

$ npm install electron-packager –save-dev

In this example, I am going to build an executable for Windows.

$ electron-packager . –platform=win32

This will generate a directory /angular-electron-win32-x64/ that contains the executable file.

And why not build one for MacOS while we’re at it.

$ electron-packager . –platform=darwin

This will generate a directory that/angular-electron-darwin-x64/ contains the app. Zip it and extract it on a mac system and you should be able to run it natively. You will get warnings that it’s from an unknown developer, but this is expected and it’s perfectly safe to open – it’s your own code after all.


The End

That’s it for the basic setup with Electron with Angular. In the future, I will post some more advanced examples of these technologies in action.

Categories: web

Radhouen Assakra

Radhouen  is a skilled DevOps Engineer and Linux professional institute DevOps tools engineer Certified, with 2+ years of hands-on experience supporting, automating, and optimizing mission-critical deployments, leveraging configuration management, CI/CD, and DevOps processes.

Leave a Reply

Your email address will not be published. Required fields are marked *