Learning how to build cross-platform desktop applications using web technologies has become an industry standard. When getting started with electron js, developers quickly realize they can leverage their existing JavaScript, HTML, and CSS skills to deploy native desktop clients across Windows, macOS, and Linux operating systems using a single unified codebase.
Electron achieves this by combining the Chromium rendering engine with the Node.js runtime environment. This architectural framework allows your application to render fluid frontend interfaces while maintaining full, low-level access to the underlying host operating system file layers.
To see how local browser caches evaluate client-side properties before scaling them out into a native desktop shell, consult our breakdown of localStorage vs sessionStorage vs Cookies.
1. Project Initialization and Dependency Set
To establish an application context, open your terminal client, initialize a standard Node package repository, and add the core Electron platform binaries to your development workspace:
Bash
mkdir electron-app && cd electron-app
npm init -y
npm install electron --save-devOpen your newly generated package.json descriptor file and update the primary execution target script pointing directly to your upcoming main process file:
JSON
{
"name": "electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
2. Creating the Main Process Entry Script
The lifecycle of an Electron system relies heavily on an architectural separation between your background system operations (Main Process) and your visible user view windows (Renderer Process).
Create an orchestration entry script named exactly main.js at the root of your folder structure:
JavaScript
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createDesktopWindow() {
// Instantiate the primary native browser frame configurations
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: false
}
});
// Load your structural frontend user view layout file
mainWindow.loadFile('index.html');
}
// Fire the initialization sequence when the platform runtime settles
app.whenReady().then(() => {
createDesktopWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createDesktopWindow();
});
});
// Terminate the backend loop when all native display panels are shut down
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
3. Assembling the Frontend View Layer
Next, create a basic user display document named exactly index.html within your project root folder path to serve as your user interface shell:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Native Desktop Client Application</title>
</head>
<body>
<h1>System Desktop Interface Operational</h1>
<p>Welcome to your native cross-platform application execution engine framework.</p>
</body>
</html>
To run your brand new creation instantly, enter your runtime command straight into your terminal prompt:
Bash
npm start
To review additional security criteria regarding context isolation rules and secure system preloading patterns, explore the official guidelines located on the Electron.js Application Architecture Manual.
The Main process runs your application’s entry execution context using a full Node.js ecosystem, handling low-level operating system events and window creations. The Renderer process is responsible for displaying individual window interfaces, operating exactly like a sandboxed web page inside a Chromium browser window frame for security safety.
Setting nodeIntegration: false is a mandatory security configuration practice for modern Electron applications. Leaving it enabled allows any untrusted client-side or remote script running inside your view window to execute raw Node.js system terminal commands directly on your user’s hard drive, causing critical security exposure risks.
The preload.js script acts as a highly secure bridge between your Main process and your Renderer process. It executes within a unique context before client web content loads, allowing developers to expose controlled, safe Node.js APIs or IPC messaging channels directly to the window view layer via contextBridge protocols.