Each renderer process is isolated and only cares about the web page running in it.
![electron api capture page electron api capture page](https://news.asu.edu/sites/default/files/dkachdoxsaiu_c7_bioxfel_catching_the_dance_of_antibiotics.jpg)
The main process manages all web pages and their corresponding renderer processes. When a BrowserWindow instance is destroyed, the corresponding renderer process is also terminated.
![electron api capture page electron api capture page](http://i.ytimg.com/vi/eBtdOxRTUtk/maxresdefault.jpg)
Each BrowserWindow instance runs the web page in its own renderer process. The main process creates web pages by creating the BrowserWindow instances. Difference between Main and Renderer processes The desktop application can access all Node modules like the file system module for handling files, request to make HTTP calls, etc. The main process can access the native GUI through modules available directly in Electron. The renderer process takes an HTML file which references the usual CSS files, JavaScript files, images, etc. Each browser window then runs its own renderer process. These are created by the main process in the main file by using the BrowserWindow module. Just starting the main process does not give the users of your application any application window. This main process is responsible for interacting with the native GUI of the Operating System.
#Electron api capture page windows
This main file creates application windows which contain rendered web pages and interaction with the native GUI (graphical user interface) of your Operating System.Īs you start an application using Electron, a main process is created. How Electron WorksĮlectron takes a main file defined in your package.json file and executes it. Now that we have set up Electron, let us move on to creating our first app using it. Once it executes, you can check if Electron is installed the right way by running the following command −
#Electron api capture page install
Now run the following command to install Electron globally. Just keep pressing Enter, and enter your name at the “author name” field.Ĭreate a new folder and open it using the cd command. It will ask you for the following information − Now to create the package.json file using npm, use the following command. Let us set up our development project.įire up your terminal/cmd, create a new folder named hello-world and open that folder using the cd command. npm makes it easy for us to set up this file. Whenever we create a project using npm, we need to provide a package.json file, which has all the details about our project.
![electron api capture page electron api capture page](https://venturebeat.com/wp-content/uploads/2020/05/IROF-explanation-1.png)
The above command will generate the following output − Confirm that node and npm are installed by running the following commands in your terminal. If you do not already have these, head over to Node setup to install node on your local system. To get started with developing using the Electron, you need to have Node and npm(node package manager) installed.
![electron api capture page electron api capture page](https://www.plerdy.com/wp-content/uploads/2022/06/plerdy-zapier-1-1-1024x485.png)
Electron is used by many companies like Microsoft, Github, Slack, etc.Įlectron has been used to create a number of apps. Github developed Electron for creating the text editor Atom. So all the electron apps are technically web pages running in a browser that can leverage your OS APIs. Instead, Electron uses web pages as its GUI, so you can also see it as a minimal Chromium browser, controlled by JavaScript. This does not mean Electron is a JavaScript binding to graphical user interface (GUI) libraries. Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs.