Hello, internet!

Getting Started with your first Electron App

Author: KorbsStudio KorbsStudio

Before we begin, we need to understand what we need to know and what tools will be beneficial during the journey. We’ll get familiar with basics soon enough.

What is Electron?

Electron, also known as ElectronJS, is a framework for developing desktop applications with JavaScript, HTML, and CSS. Electron allows you to retain one JavaScript codebase and achieve cross-platform applications that function on Windows, macOS, and Linux by embedding Chromium and Node.js into its binary – no native development knowledge necessary.

Why use it and is it right for me?

Electron is a great choice for those who are already familiar with web technology like JavaScript, HTML, and CSS. As Electron’s website says, “If you can build a website, you can build a desktop app.”. Howerver, if you’re not at all familiar with web technology, you can either learn them, or Electron may not be for you.

Requirements

While developing an Electron app all you really need is to have NodeJS installed and a code editor.

I recommend using one of the followings as your code editor, or just your preferred one:


Creating your Electron app

Package File

Like with any other NodeJS project, we’ll use the initate command to create our package file. The command will prompot you with some fields to set in your configuration. First, create a folder where you want your project to be, then open your terminal in that folder with the cd command. We could also create a folder with mkdir command as well:

mkdir electron-app && cd electron-app
npm init

Once you’re done with the init command, a new file named package.json should of generated, it’ll look something like this:

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "Hello, internet!",
  "main": "main.js",
  "author": "JohnSmith",
  "license": "MIT"
}

Now we have to install the electron package under your app’s devDependecies. We can do this by simply running:

npm install --save-dev [email protected]

Finally, we’re going to want a way to start the Electron app in developer mode. In your package.json, add the following:

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

The package file is prepared, but don’t use the start script yet since it will return an error because there is no app file or information for it to show or pull from. Let’s start creating the main process now for it to work with.

Main Process

Most commonly in Electron apps, the main process is named as either main.js or index.js. In this case I’m going with main.js. In the main process to run two modules of Electron that are nessessary, both app and BrowserWindow. The app module controls your application’s event lifecycle while the BrowserWindow creates and manages application windows.

Since the main process runs through NodeJS, you’ll need to add this line at the very top of main.js:

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

Then we’ll a new function called createWindow() that loads the HTML content into the BrowserWindow:

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    })
    mainWindow.loadFile('index.html')
}

We’ll now need to find a way for the app to call this function so it can open the main window. Usually, in Electron, BrowserWindows are only allowed to be created after the app module is ready. We can use the app.whenReady() API for this:

app.whenReady().then(() => {
    createWindow()
})

Content

In the main process, we set our main window open a file called index.html, using the loadFile API. Let’s go ahead and create that file now, named as index.html of course. Usually what content is added is up to you, it’s your app after all, but for now let’s use an example so we can confirm that things work.

In the meantime, let’s use this example:

<html>
    <head>
        <title>Hello, internet!</title>
        <meta charset=UTF-8>
    </head>
    <body>
        <h1>Hello, internet!</h1>
        <p>I built an app :D</p>
    </body>
</html>

Running the app

We can now try to run the app, as we have all the basics requirements in now. We can run the app by simply running:

npm start

Templates to start from

Provided by Electron’s Team

Provided by Korbs Studio