/

Introduction to Electron: Building Cross-Platform Desktop Apps with Electron

Introduction to Electron: Building Cross-Platform Desktop Apps with Electron

Learn the fundamentals of Electron, the powerful framework developed by GitHub that enables the creation of innovative and popular cross-platform applications.

Electron is an Open Source and free tool for building cross-platform desktop apps using JS, HTML, and CSS. It has gained immense popularity and is used by many successful applications such as VS Code, Slack, Discord, and more.

Revolutionizing native desktop app development, Electron made it viable to create JavaScript-based desktop applications. While other tools existed before Electron, it was Electron that made it mainstream and facilitated the development of cross-platform desktop apps - providing a solution that runs consistently across different operating systems.

A Quick Overview of the Electron Internals

At its core, Electron bundles the Chromium rendering library and Node.js to provide developers with a canvas powered by Chromium and the ability to use any Node.js package and run Node.js code. Essentially, Electron serves as a node.js for the desktop and allows the creation of user interfaces (UI) using HTML, CSS, and JavaScript.

Electron aims to be fast, small in size, and minimalist while ensuring that essential core features are available for all applications.

Types of Apps You Can Create with Electron

With Electron, you can create various types of apps, including regular apps with a dock icon and window, menu bar apps without a dock icon, daemons, and command-line utilities. Visit the official Electron site to explore a collection of Electron apps, and you can even publish your apps on the Windows and Mac App Store.

The Electron APIs App

To get started with Electron, you can download the Electron API Demos app, an official sample desktop app built using Electron. This app serves as a comprehensive reference and allows you to experiment with and explore several features of Electron. The Electron API Demos app is open source, and its source code can be found on GitHub.

Creating Your First Electron App

To create your first Electron app, follow these steps:

  1. Create a new folder on your filesystem.

  2. In the created folder, run the following command:

npm init -y
This command initializes a package.json file for your project.

  1. Add the following line to the “scripts” section in the package.json file:

"start": "electron .
This line specifies the script to start your Electron app.

  1. Install Electron by running the following command:

npm install -D electron

  1. Once the installation is complete, start Electron with:

npm start

Note: You may encounter an error stating that there is no index.js file. This error is because index.js is set as the main starting point for the app in the package.json file.

Creating a Hello World Electron GUI App

Now, let’s create an application that displays a “Hello World” message in a window.

  1. Create two files in your project folder: main.js and index.html.

  2. In main.js, add the following code:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const { app, BrowserWindow } = require('electron')

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

        win.loadFile('index.html')
    }

    app.whenReady().then(createWindow)

    This code initializes the Electron app window and loads the index.html file.

  3. In index.html, add the following code:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        We are using node
        <script>
            document.write(process.versions.node)
        </script>,
        Chrome
        <script>
            document.write(process.versions.chrome)
        </script>,
        and Electron
        <script>
            document.write(process.versions.electron)
        </script>.
    </body>
    </html>

    This code displays a “Hello World” message along with the versions of Node.js, Chrome, and Electron being used.

  4. Run npm start again, and a window with the “Hello World” message will appear.

Making the App Developer’s Life Easier

Electron aims to simplify the life of developers by providing easy-to-use features for common app functionalities. It offers built-in solutions for managing In-App Purchases, Notifications, Drag and Drop functionality, managing key shortcuts, and much more. Additionally, Electron provides a hosted service for app updates, simplifying the updating process compared to building such a service from scratch.

Tags: Electron, Cross-platform development, Desktop applications, JavaScript, Framework