Getting Started with Electron

laurentiu.raducu

23 Mar, 2023

Getting Started with Electron

Introduction

Electron is a popular framework for building cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript. It was created by GitHub and has been used to build apps like Slack, Visual Studio Code, and Discord. One of the main benefits of using Electron is that you can write your app once and deploy it on multiple platforms, like Windows, macOS, and Linux.

Setting up the Environment

Before we can start building our Electron app, we need to make sure our development environment is set up correctly. Here are the steps to follow:

  • Install Node.js – Electron is built on top of Node.js, so you’ll need to install it first. You can download Node.js from their website and follow the installation instructions for your operating system.
  • Install Electron – Once Node.js is installed, you can use npm (Node Package Manager) to install Electron. Open your terminal or command prompt and run the following command: npm install --save-dev electron
  • Create a basic Electron app – To make sure everything is working correctly, let’s create a basic Electron app. Create a new folder for your app and create two new files inside it: main.js and index.html. In main.js, add the following code:
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()
})

In index.html, add some basic HTML:

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

Save both files and run the following command in your terminal: npm start. This should open a window with the title “Hello World!” and display a “Hello World!” message.

Building Your App

Now that we have our development environment set up and have created a basic Electron app, let’s start building our own app. Electron has two processes: the main process and the renderer process. The main process is responsible for creating windows and managing system events, while the renderer process is responsible for displaying the UI of your app. Here are the steps to follow:

  1. Understanding the Main and Renderer processes – As mentioned above, the main process is responsible for creating windows and managing system events. The renderer process, on the other hand, is responsible for displaying the UI of your app. Each renderer process runs in a separate Chromium process, which means that they are isolated from each other.
  2. Creating the main process file – In your main process file (main.js), you can create windows and manage system events. For example, you can use the app object to listen for the ready event, which is emitted when Electron has finished initializing. You can then create a new window using the BrowserWindow class.
  3. Creating the renderer process file – In your renderer process file (usually named index.js or main.js), you can create the UI of your app using HTML, CSS, and JavaScript. You can use Node.js modules in your renderer process by enabling nodeIntegration.
  4. Building UI with HTML, CSS, and JavaScript – With the renderer process file, you can create the UI of your app using web technologies like HTML, CSS, and JavaScript. You can use frameworks like React or Angular to make building UIs even easier.

Packaging and Distributing Your App

Once you have built your app, you will want to package it for distribution on various platforms. Here are the steps to follow:

  1. Packaging your app for distribution – You can use tools like Electron Forge or Electron Builder to package your app for distribution. These tools will create an installer file for your app that can be distributed on various platforms.
  2. Distributing your app on various platforms – Once you have your installer file, you can distribute your app on various platforms like the Microsoft Store, the Mac App Store, or as a standalone download from your website.
  3. Signing and notarizing your app for macOS – If you are distributing your app on the Mac App Store, you will need to sign and notarize your app. This involves getting a developer certificate from Apple and using the codesign and stapler tools to sign and notarize your app.

Electron is a powerful and easy-to-use framework for building cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript. With Electron, you can write your app once and deploy it on multiple platforms, which makes it a great choice for beginner developers. If you’re interested in desktop app development, we encourage you to explore Electron further and see what you can create!