Setting Up Electron for Your First Desktop App

Welcome to your first lesson in building cross-platform desktop apps with Electron! If you’ve ever built websites or worked with JavaScript, you’re already halfway there. This tutorial will walk you through installing Electron, setting up the environment, and creating a simple app that says 'Hello, World!' on your desktop.

And don't worry, this isn't rocket science—if you know how to open a terminal, you're golden.

What You’ll Learn:

How to install Node.js (if you don’t have it already)
How to set up the Electron environment
How to create and run your first basic app

Key Takeaway:

You don't need to know everything upfront. Just get the basics working, and we’ll build up from there.

Step 1: Install Node.js

Before diving into Electron, you’ll need Node.js installed on your system. Node.js is a runtime that allows you to run JavaScript outside of a browser, which is crucial for Electron apps. If you’ve used Node.js before, great! If not, no worries—this part is super easy.

1.1 Check if Node.js is Already Installed

First, check if Node.js is already on your system. Open your terminal (if you’re on Windows, hit the Windows key, type “cmd” and press Enter; if you’re on macOS or Linux, open “Terminal”) and run:

node -v

If you get a version number (like v18.16.0), congrats! Node.js is already installed, and you can skip the next step. If not, let’s get you set up.

1.2 Install Node.js

Head over to Node.js Official Website and download the LTS (Long Term Support) version for your operating system (it’ll usually be marked as “Recommended for Most Users”).

Once downloaded, run the installer and follow the prompts. It’s pretty straightforward, just click “Next” a few times, and boom—you’re good to go.

To verify that Node.js was installed correctly, run the same command in your terminal:

node -v

You should see the version number now. You’ll also want to check that npm (Node’s package manager) is installed by running:

npm -v

Again, you should see a version number.

Step 2: Install Electron

Now that Node.js is installed, it’s time to install Electron. Think of Electron as the secret sauce that lets you build desktop apps using web technologies (HTML, CSS, and JavaScript) and run them on any platform—Windows, macOS, or Linux.

2.1 Use npm to Install Electron

In your terminal, navigate to the directory where you want to create your project (this could be any folder, like Desktop or Projects), and run the following command:

npm init -y

This creates a basic package.json file, which is like the blueprint for your project. Now, let’s install Electron itself:

npm install electron --save-dev

This command installs Electron as a development dependency (that’s what the --save-dev flag is for). Electron is a big package, so it might take a couple of minutes to install. Grab a coffee if you like—but don’t go too far because the magic’s about to happen.

2.2 Check Electron Installation

To verify that Electron is installed correctly, you can run:

npx electron -v

This should return the version of Electron that’s installed. If it does, you’re all set! If not, double-check that you’re in the right folder and that Electron was installed properly.

Step 3: Create Your First Electron App

Here’s the exciting part: building your first app! Let’s create a simple app that says “Hello, World!” in a desktop window.

3.1 Create the Project Structure

To get started, we need a few files. Open your terminal, and in the project folder you created earlier, run these commands to create the basic structure:

mkdir my-electron-app
cd my-electron-app
touch main.js index.html

main.js: This file will hold the core logic of your Electron app.
index.html: This will be the simple HTML file that’s displayed in your app window.

3.2 Write the Electron Code (main.js)

Let’s write the code that makes Electron work. Open main.js in your favorite code editor (if you don’t have one, VS Code is a great option). Add the following code:

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

function createWindow() {
    // Create the browser window
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    // Load the index.html of the app
    win.loadFile('index.html');
}

// When Electron has finished initialization, create the window
app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        // On macOS, re-create a window in the app when the dock icon is clicked
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

// Quit when all windows are closed, except on macOS
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

Let’s break down what this code does:

app: This is the Electron module that controls your app’s lifecycle.
BrowserWindow: This creates a window where your HTML will be displayed.
createWindow(): This function sets up the window and loads the index.html file.
The app.whenReady() line ensures that Electron doesn’t try to create the window before it’s ready.

3.3 Create the HTML File (index.html)

Now, let’s add some basic HTML. Open index.html in your editor and add this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

This is just a simple HTML file with a title and a message that says, "Hello, World!" You can change this later to fit your needs, but for now, this will do the trick.

Step 4: Run Your Electron App

Now it’s time to run the app and see the magic. Go back to your terminal and run the following command:

npx electron .

And just like that, your very own desktop window should pop up with "Hello, World!" displayed inside. This is your first Electron app—running entirely on your desktop, not in a browser.

Step 5: Troubleshooting Tips

If something doesn't work, don’t panic! Here are some common things to check:

Is Node.js and Electron installed? Run node -v and npx electron -v to verify.
Are you in the right folder? Make sure you're in the project folder where main.js and index.html are located.
Is the Electron code correct? Double-check your main.js file to ensure no typos.

Step 6: Next Steps

Congrats! You’ve successfully set up Electron, installed Node.js, and created your first app. While this might seem like a small win, it’s a huge step toward mastering Electron. From here, you can start adding more features and styling to your app, but that’s for another tutorial.

For now, bask in the glory of your working desktop app. You’ve earned it.

Summary:

You installed Node.js and Electron.
You created a simple Electron project with main.js and index.html.
You ran your first desktop app using Electron.

Stay tuned for the next lesson, where we’ll add some real functionality to your app.

And remember: Building apps is like making pancakes—your first one might be a little rough, but the next ones will be golden.

That's the end of your first step into the world of Electron. Keep going, and soon enough, you'll have a fully functional desktop app you can show off!

0x3d.Site