- #ELECTRON API WITH ANGULAR HOW TO#
- #ELECTRON API WITH ANGULAR CODE#
- #ELECTRON API WITH ANGULAR SERIES#
- #ELECTRON API WITH ANGULAR MAC#
The changes I have done are for the Electron app to use a loadURL that points at our dist/ folder and loads the index.html file. I have made a few changes from what is found in the Electron getting started guide for this Electron tutorial. **If you are using Angular v6+ your pathname will be: ‘./dist/appName/index.html’ Pathname: path.join(_dirname, './dist/index.html'), Create the file in the src/ folder of your project (Electron Forge won’t allow it to be in the same directory as package.json). This file comes from Electron’s documentation for getting started with a few changes to it to work with our Angular application.
#ELECTRON API WITH ANGULAR CODE#
Inside of your Angular CLI generated project, add the following code block to a file that I am going to call electronMain.js. In our case we are going to have our main script load the entry point to our application. The URL can be a remote web URL if you feel like creating a desktop app out of your favorite website (this does have some limitations). The main script is going to start the electron application, create a window and the load a specified URL. So we will need to create this script in our project.
Meaning it will check your package.json for the “main” script and execute whatever it finds. Let’s get started!Įlectron uses the main script defined in your package.json to start up. By leveraging the Electron Forge CLI the way I am about to demonstrate, we are able to add one file and modify the package.json in an Angular CLI generated project to create a cross platform desktop application. Electron Forge is Electron’s command line interface (CLI) tool. One way, the way I am going to demonstrate in this Electron tutorial, is using Electron Forge. Thus, setting up an Electron application can be done in a variety of ways. This Electron tutorial is assuming your Angular application was created and maintained using the Angular CLI.Įlectron Forge Electron has a fairly large open source community, with that comes a wide variety of options on how you want to leverage the framework. With that in mind, you will need to have the proper node and npm packages installed for any Angular application. On top of that, it includes all of Chromium’s APIs, all of NodeJS’s built in modules and can support third party modules.įor this Electron tutorial, I am going to be using an example repo I have created in that getting started blog I linked above. You can view that here as well as get more in depth description below.Įlectron has a core set of API’s it uses to interact with the user’s operating system. I’ve also created a video to accompany this tutorial that walks through the different sections of this blog post. Thus, you can write a single web application, with a single code base and use that application with Electron to turn a web application into cross platform desktop applications. Electron is packaged with your application, meaning, there will be consistency across operating systems in the same way a chrome browser is consistent across operating systems. Electron also has to natively interact with a computer’s operating system. If you are unfamiliar with what Electron is, it essentially is a chrome browser dedicated to running a single application.
#ELECTRON API WITH ANGULAR HOW TO#
This Electron tutorial will focus mainly on Electron and how to get started developing an Electron application with Angular.
#ELECTRON API WITH ANGULAR SERIES#
If you are new to Angular, I have written a blog series on getting started with Angular.
#ELECTRON API WITH ANGULAR MAC#
A technology stack using Angular and Electron allows developers to build cross platform desktop applications for Windows, Mac and Linux using web technologies. In this Electron tutorial I will walk through the steps you can take to turn an Angular application into a native desktop application using Electron.
0 kommentar(er)
