Your First Electron Application
Follow a step-by-step guide to create a basic 'Hello World' Electron application, covering the main and renderer process fundamentals.
Your First Electron Application is a free Electron Desktop App Development lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Electron Desktop App Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Hello, Electron World!
Time to build your first Electron app — a simple desktop "Hello World." It introduces the core files that bring web tech to the desktop.
Setting Up Your Project
First, scaffold the project: make a folder, run npm init, then install Electron as a dev dependency. The commands are below.
The Main Process (main.js)
Every app has a main process — a Node.js environment that controls the lifecycle, talks to the OS, and creates windows. It starts in main.js.
main.js: Basic Window Setup
In main.js, you import Electron modules and define how to create a window that will host your web content. Try the basic setup below.
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
// We'll load our HTML file here soon!
}
app.whenReady().then(createWindow);
// Handle closing all windows for non-macOS
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// Handle re-activating app on macOS
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});The Renderer Process (index.html)
The renderer process is where your UI lives — essentially a Chromium window rendering HTML, CSS, and JS. It loads from index.html.
index.html: Our UI Content
This index.html holds your Hello World message — just an ordinary web page, exactly like any you'd build for the browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron App</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 50px; background-color: #f0f0f0; }
h1 { color: #333; }
p { color: #666; }
</style>
</head>
<body>
<h1>Hello from Electron!</h1>
<p>This is your very first desktop application.</p>
</body>
</html>Connecting Main & Renderer
Now connect the two: tell the window to display your page with win.loadFile() inside createWindow. One line wires UI to the main process.
main.js: Loading HTML
Here is main.js updated to load the page. Note how __dirname locates index.html relative to the script, no matter where it runs.
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
win.loadFile(path.join(__dirname, 'index.html')); // Load the HTML file
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});Running Your Electron App
Add a start script to package.json so you can launch the app with one command instead of typing electron each time.
package.json: Start Script
Your package.json should look like this. "electron ." runs main.js in the current folder — save it, then run "npm start" to launch.
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "My first Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^28.0.0"
}
}Quick Check: Main Process Role
You've seen how main.js and index.html work together. Let's test your understanding of their primary roles.
Recap: Your First Electron App
You built your first Electron app: a main process for lifecycle and windows, a renderer for UI, wired together with a start script.
Frequently asked questions
Is the “Your First Electron Application” lesson free?
Yes — the full text of “Your First Electron Application” is free to read here on the web, and the Electron Desktop App Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Electron Desktop App Development course, upgrade to CoddyKit PRO.
What will I learn in “Your First Electron Application”?
Follow a step-by-step guide to create a basic 'Hello World' Electron application, covering the main and renderer process fundamentals. You practise Electron Desktop App Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Electron Desktop App Development?
No prior experience is required. Electron Desktop App Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Your First Electron Application” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Electron Desktop App Development lesson?
Yes. Every Electron Desktop App Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- What is Electron?
- Setting Up Your Dev Environment
- Your First Electron Application
- Understanding Electron's Architecture