Your First Electron App: A Minimal Example

Welcome to the exciting world of desktop application development with Electron! As a web developer, you already possess many of the skills needed to build powerful, cross-platform desktop applications. Electron bridges the gap between web technologies and native desktop experiences, allowing you to leverage your existing knowledge of HTML, CSS, and JavaScript to create amazing apps. In this section, we'll guide you through building your very first Electron application – a minimal example that demonstrates the fundamental components.

Before we dive into code, let's understand what makes an Electron app tick. At its core, an Electron app is a standard Node.js application that leverages Chrome's rendering engine (Chromium) to display a web page. This web page isn't just any web page; it's your application's user interface, rendered in a dedicated window.

Let's get started by setting up a new project. First, create a new directory for your project. You can name it anything you like, but 'my-first-electron-app' is a good choice for now.

Next, we need to initialize a new Node.js project within this directory. This will create a package.json file, which is crucial for managing your project's dependencies and defining how your app runs.

The -y flag tells npm to accept all the default options, which is perfect for our minimal example. Now, we need to install Electron as a development dependency. This means Electron will be available when you're developing your app, but it won't be bundled with your final application unless you explicitly configure it to be.

With Electron installed, we can now define the entry point for our application. Create a new file named main.js in the root of your project directory. This file will contain the main process logic for your Electron app.

Now, let's add some code to main.js. This code will instruct Electron to create a new browser window and load an HTML file into it. We'll also specify the dimensions of the window.

In main.js:

• We import the necessary modules from Electron: app and BrowserWindow.
• createWindow is a function that creates a new BrowserWindow instance. This window is essentially our application's main interface.
• We set the width and height of the window.
• webPreferences: { nodeIntegration: true } is important. For simple examples, it allows us to use Node.js APIs directly within our renderer process (the web page).
• win.loadFile('index.html') tells the window to load the content of our index.html file.
• app.whenReady().then(...) ensures that we only create a window after Electron's initialization is complete.
• The subsequent app.on(...) handlers manage the application's lifecycle, ensuring it behaves correctly on different operating systems and when the user interacts with it.

Next, we need to create the index.html file that our main.js script will load. Create this file in the root of your project directory as well.

Populate index.html with some basic HTML content.

Finally, we need to tell package.json how to start our Electron app. Open package.json and find the scripts section. Add a new script named start that will run Electron.

The "start": "electron ." line tells npm to execute the electron command and pass the current directory (.) as the application's root. Electron will then look for the main file specified in package.json (which is main.js).

Now you're ready to run your first Electron app! Open your terminal in the project directory and execute the following command:

If everything is set up correctly, a new desktop window should appear, displaying the "Hello from Electron!" message. Congratulations, you've just built and run your first Electron application!

graph TD
    A[Web Developer Skills] --> B{Electron};
    B --> C[HTML, CSS, JavaScript];
    B --> D[Native Desktop App];
    C --> D;

This minimal example demonstrates the core components: the package.json to define the project and entry point, the main.js for the main process logic, and an index.html for the user interface. In the following sections, we'll build upon this foundation to explore more advanced features and concepts.