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:
- Configure Electron 1.7 with Angular 7.x.
- Build a simple timer app in Angular.
- Package the app for install on Windows 10, macOS, and Linux Ubuntu.
You can obtain the source code for this project on Github.
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
The next step is to configure Electron. There are all sorts of possibilities for customization and we’re just scratching the surface.
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.
createWindow 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 file
index.html in the folder
dist/. Do NOT confuse this with the index file in the folder
src/. 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.
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.
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.