If you are interested in using Web Development skills for developing apps for different desktop platforms like Windows, Linux or macOS, Electron is the perfect framework that suits your needs. Let’s start with a brief introduction to Electron.
ElectronJS: Electron was developed lately in 2013 by the open-source and version control giant, GitHub. Electron uses NodeJs in its core to serve pages built on HTML and CSS as a desktop app. This implies that developers comfortable in HTML5 or Android Development can easily switch their platform to Electron.
The Electron app may be categorized into two main processes, namely, Main and Renderer process.
Performing Culture: There are two process in the Electron performing Culture:
- Main Process The main process is responsible for creating windows by using BrowserWindow instances. Individual BrowserWIndow instance renders a webpage in its renderer process. Destroying a BrowserWindow instance implies that the corresponding renderer process is also terminated.
- Renderer Process There is a single main process which is responsible for maintaining multiple renderer processes. Each renderer process manages the webpage and its scripts running inside it.
Electron supports various APIs for both the main and renderer processes, which helps to interact with the desktop operating system and its resources.
Prerequisites: The main prerequisites which may be considered important for starting on with Electron are listed below.
- HTML and CSS for User Interface.
- JavaScript as a main language.
- Node.js and npm
Installing Electron: Let’s start with the building blocks of development with Electron.
- Step 1: Make sure node and npm are installed.
node -v
npm -v
- Step 2: Inside of your working folder run the below command from your code editors integrated terminal after that have a look at a basic package.json file, which is used by npm to define properties and import libraries.
npm install electron --save-dev
javascript
{ "name": "electronapp", "version": "1.0.0", "description": "Electron application", "main": "main.js", "scripts": { "start": "electron ." }, "keywords": [ "Electron" ], "author": "xyz", "devDependencies": { "electron": "^7.1.7" } } |
- Step 3: Now, let’s see a basic main.js file which acts as the main process.
javascript
const { app, BrowserWindow } = require( 'electron' ) let win function createWindow () { // Create the browser window. win = new BrowserWindow({ width: 800, height: 600, icon: ( './icon.png' ), webPreferences: { nodeIntegration: true } }) // and load the index.html of the app. win.loadFile( './index.html' ) //win.loadURL('https://google.com/') // Open the DevTools. win.webContents.openDevTools() // Emitted when the window is closed. win.on( 'closed' , () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. win = null }) } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on( 'ready' , createWindow) // Quit when all windows are closed. app.on( 'window-all-closed' , () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin' ) { app.quit() } }) app.on( 'activate' , () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null ) { createWindow() } }) |
- Step 4: The main process is done, let’s see a basic HTML code which acts as a renderer process.
html
<!DOCTYPE HTML> < html > < head > < title >my first electron app</ title > </ head > < body > < h1 >my first electron app</ h1 > </ body > </ html > |
- Step 5: This ends our coding part. Now, running
javascript
npm install --unsafe-perm= true |
will download necessary node_modules, required by electron to render a page.
- Step 6: After this, we will launch the app using npm run start, start being the script which we have defined in package.json.
Output:
References: https://electronjs.org/docs/tutorial/first-app#installing-electron
[…] ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.Using Keyboard shortcuts is an efficient and time-saving activity. Users who are habituated to using Keyboard shortcuts are more productive and multitask more efficiently than users who don’t. Keyboard shortcuts let you achieve more with less effort. They are useful when managing numerous tasks on the PC at once. Electron provides us with a way by which we can define global shortcuts throughout the application using the Instance methods of the built-in globalShortcut module. This tutorial will demonstrate how to register Global Keyboard shortcuts throughout the application in Electron.We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system. […]
[…] ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime. In certain desktop applications, developers would like to provide a feature wherein the user can find a custom text selection in the contents of the web page. Just like search functionality triggered by Ctrl+F in Chromium browsers. Electron provides a way by which we can successfully find a custom text in the contents of the page using the Instance methods and events of the built-in BrowserWindow object and the webContents property. This tutorial will demonstrate how to find text in the contents of the page in Electron. We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system. […]
[…] ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime. […]