Build Cross‑Platform Desktop Apps with Electron: A Quick Hello World Guide
This article introduces Electron, the open‑source framework that lets you create cross‑platform desktop applications using JavaScript, HTML, and CSS, showcases popular apps built with it, and provides a step‑by‑step hello‑world example with code and setup instructions.
What is Electron?
Electron is an open‑source framework maintained by GitHub that enables developers to build cross‑platform desktop applications using JavaScript, HTML, and CSS. It runs on Windows, Linux, and macOS and is based on Chromium.
Origins and Adoption
Originally created for the Atom text editor, Electron was later open‑sourced. Despite being a young project (currently version 1.1), it powers many popular applications such as:
Atom – GitHub’s text editor
Slack – the desktop client of the unicorn messaging platform
Visual Studio Code – Microsoft’s code editor
Brave Browser – a privacy‑focused web browser
Hello World Example
The following example demonstrates a minimal Electron app.
Project Structure
electron_test
├── package.json
├── main.js
└── index.htmlpackage.json
{
"name": "deskjs",
"version": "0.1.0",
"main": "main.js"
}index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Hello World</h1>
<h1>第一个 JS 桌面应用</h1>
</body>
</html>main.js
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});Running the Application
Ensure Node.js is installed, then install Electron globally:
npm install -g electron-prebuiltExecute the app by running electron in the project folder or by dragging the electron_test directory onto the Electron console.
Project Repository
Official source code: https://github.com/electron/electron
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Java High-Performance Architecture
Sharing Java development articles and resources, including SSM architecture and the Spring ecosystem (Spring Boot, Spring Cloud, MyBatis, Dubbo, Docker), Zookeeper, Redis, architecture design, microservices, message queues, Git, etc.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.