This is going to be your “Hello World” of Desktop Apps. We’re going to build a simple application that opens a window and displays text.
I’m going to break this down into the smallest possible steps. Think of this like setting up a surfboard; it’s all about the order of operations.
Step 1: The Setup
You need a place to put your code. Open your terminal and create a folder:
Bash
mkdir my-first-app
cd my-first-app
Now, we need to tell the computer this is a Node.js project. Run this command and just press “Enter” for every question it asks:
Bash
npm init -y
Next, install Electron itself:
Bash
npm install electron --save-dev
Step 2: The Logic (main.js)
Electron needs a “brain” to tell it how to behave. Create a file named main.js in your folder and paste this in:
JavaScript
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({ width: 800, height: 600 });
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
- What this does: It tells Electron, “When you start, open a window that is 800×600 pixels and show it the file index.html.”
Step 3: The Look (index.html)
This is just a standard web page. Create a file named index.html in the same folder:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Binary Bonfire Desktop</h1>
<p>Success! The app is running.</p>
</body>
</html>
Step 4: The Instructions (package.json)
We need to tell the computer how to run this. Open your package.json file. You’ll see a section called “scripts”. Change it to look like this:
JSON
"scripts": {
"start": "electron main.js"
},
Step 5: Launch It
Back in your terminal, type this:
Bash
npm start
Boom. A window should pop up. You just built a desktop application.