Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.
Before proceeding with this tutorial, you should have a basic understanding of Javascript and HTML. You also need to know about a few native Node.js
Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native APIs.
To get started with developing using the Electron, you need to have Node and npm installed.
First download sample app from this URL. https://github.com/lahirutm/electron-test-apps
According to the main.js file, we open index.html file in a electron browser window.
const { app, BrowserWindow, ipcMain } = require("electron");
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600
});
mainWindow.loadFile("index.html");
}
// 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.whenReady().then(() => {
createWindow();
app.on("activate", function () {
// 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 (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", function () {
if (process.platform !== "darwin") app.quit();
});
To run this app open a terminal & run below command to install dependencies & libraries.
npm install
then run this to start the example app.
npm start
Then example app will open.
