Getting Started with Electron.js: Building Your First Desktop App

By -
 

Have you ever wished you could take your favourite website or web app and turn it into a full-fledged desktop application? That’s exactly what Electron.js lets you do! It’s a magical little framework that lets web developers like us build cross-platform desktop apps using the skills we already know—HTML, CSS, and JavaScript.

Whether you’re on Windows, macOS, or Linux, Electron opens the door to creating apps that feel right at home on your desktop. In this post, we’ll take the plunge together and build a simple but super satisfying “Hello World” desktop app. By the end, you’ll see just how easy (and fun!) it can be to bring your web projects to life on your computer.

1. Setting Up Your Environment

Before starting, make sure you have:

  • Node.js installed (check by running node -v in your terminal).

  • npm (comes with Node.js).

Then, create a new folder for your project:

mkdir my-electron-app
cd my-electron-app
npm init -y

This sets up a package.json file.

Next, install Electron as a development dependency:

npm install electron --save-dev

2. Project Structure

A basic Electron project needs just a few files:

my-electron-app/
├── package.json
├── main.js
└── index.html

  • main.js – This is the main process that controls your app.

  • index.html – This is the front-end interface your users will see.

3. Writing the Main Process

Create a file called main.js and add the following:

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Explanation:

  • app – Controls the application lifecycle.

  • BrowserWindow – Creates a window to display HTML content.

  • loadFile('index.html') – Loads your front-end page.

4. Creating the Front-End

Create index.html with some simple content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello Electron</title>
  </head>
  <body>
    <h1>Hello, Electron!</h1>
    <p>This is your first desktop app.</p>
  </body>
</html>

5. Running Your App

Update your package.json scripts:

"scripts": {
  "start": "electron ."
}

Then run:

npm start

You should see your desktop window with “Hello, Electron!”

6. Next Steps

Once you’ve mastered the basics, you can:

  • Add interactivity with JavaScript.

  • Use Node.js modules for file system operations.

  • Package your app for Windows, macOS, or Linux.

Once I got the hang of Electron, I started experimenting and building a few small projects just for fun. It was amazing to see my web skills come to life as actual desktop apps!

  • Gratify Me – I made a simple app where I could save to do lists with rewards when completed and save them locally. View this project here: Gratify Me

  • Daily Muse – Designed for musicians who sometimes get stuck deciding what song to practice. Add your songs to your personal list, then shuffle through them to get inspired and pick your next practice piece no more indecision! View this project here: Daily Muse

  • The Witchery – Finally, I built a small calendar app personalised for the ethereal people who want something more than google calendars to use.

Each project taught me something new and gave me confidence to experiment even more. If you’re just starting out, I highly recommend picking one small idea and turning it into an app, you’ll learn a ton along the way!


Comments

Post a Comment

Popular posts from this blog

How I Found Mentors as a Lost 25-Year-Old (and You Can Too)

By -
Image
  One of the hardest things to come to terms with is exactly what Taylor says in Nothing New : "How can someone know everything at 18 but nothing at 22?" That’s how I felt. In high school, I had direction. I had a plan. I knew what I was doing, or at least I thought I did. But somewhere along the line, life got too big to manage. There were challenges I couldn’t have imagined—curveballs that threw me off track, knocked the air out of my lungs, and left me thinking, Wait… what happened? Eventually, you find your way back to yourself. You brush off the dirt, squint into the sunlight, and start walking again. Maybe you don’t know exactly where you’re going, but you start to get a feeling for it. A hunch. A direction. So what do you do at 25 when you realise… ✨ You’ve never actually had a proper mentor in your life? ✨ You leave the Shire and go in search of adventure. That’s exactly what I did. I went looking for mentors in every possible way I could. I wanted some...
Read more

Leveling Up: What I Learned from Attending a Tech Event Alone

By -
Image
  Why I Attended This Event Recently, I’ve been looking at ways of challenging my confidence, so I decided to go solo to a Code Like A Girl x TikTok event (despite how terrifying that is) in which we heard from people in the industry on how to make sure the tools you are applying to jobs with are well refined. So there I am, surrounded by a bunch of amazingly skilled strangers, and I decide: sink or swim. I push myself to start socialising (because really, it is just that easy, right?). I spot a astoundingly stylish person and run over to compliment this person, and we start chatting. She turns out to be a senior developer and starts giving me advice on entering the industry and how I should be answering questions. And, like the complete shameless dork I am, I whip out my phone and start taking notes. I also did the brave thing and asked for her LinkedIn. The Talks: Confidence, Impostor Syndrome & Interviews The event kicked off with a talk on confidence and impostor syndrom...
Read more

Coding my first NFC tag: A Beginners Guide

By -
Image
NFC Tags — Because Tech Should Be Cute  In my endless quest to learn new tech (and maybe get a little closer to landing that dream job), I figured — why not start somewhere fun? So, this week was all about teaching myself NFCs — aka those tiny magic chips that make your phone do cool stuff with just a tap.  Honestly? This whole obsession started when I was at a coding event, living my best networking life, and I met the coolest software engineer. She had this little NFC sticker on the back of her phone, and instead of awkwardly swapping Instagram handles, people just tapped their phone — boom! All her socials popped up instantly. Iconic, right? What Even Is NFC and Why Should You Care? Okay — NFC stands for Near Field Communication . It’s basically a tiny chip — either built into your phone or in a little tag/sticker — that lets you transfer small bits of info instantly when your phone gets super close. Like, “bestie secret” close. ✧  Stick them on your fridge ...
Read more