electron Getting started with electron Hello World!


Example

Setup

An Electron project structure usually looks like this:

hello-world-app/
├── package.json
├── index.js
└── index.html

Now let's create the files and initialize our package.json.

$ mkdir hello-world-app && cd hello-world-app
$ touch index.js
$ touch index.html
$ npm init

Note: If the main parameter is not specified in package.json, Electron will use index.js as the default entry point.

The Main Process

In Electron, the process that runs package.json’s main script is called the main process. Here we can display a GUI by creating BrowserWindow instances.

Add the following to index.js:

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

// Global reference to the window object
let win

// This method will be called when Electron has finished
// initialization and is ready to create browser windows
app.on('ready', function(){
    // Create the window
    win = new BrowserWindow({width: 800, height: 600})

    // Open and load index.html to the window
    win.loadURL('file://' + __dirname + '/index.html')

    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object
        win = null
    });
})

// Quit the app if all windows are closed
app.on('window-all-closed', () => {
    app.quit()
})

HTML Template & Renderer Process

Next we create the GUI for the app. Electron uses web pages as its GUI, each running in their own process called the renderer process.

Add the following code to index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Running the App

There are multiple ways to run an Electron App.

With electron-prebuilt installed Globally

First, make sure you have electron-prebuilt installed.

Now we can test the app using this command:

$ electron .

Method 2 - Without electron-prebuilt installed Globally

First, we'll have to enter your app's folder (the folder where package.json is).

There, open up a Terminal/Command Prompt window and type npm install to install the necessary into that app's folder.

Afterwards, key in npm start to run the app. Keep in mind that your package.json still has to specify a 'start' script.

If everything worked correctly, you should see something like this:

enter image description here

Congratulations! You've successfully created your first Electron app.