Quick Getting Started with ElectronJS

Introduction

Here is a quick tutorial on getting started with Electron JS, the new way for creating native desktop applications!

You will learn how to set up a basic ElectronJS application!

Prerequisites

Understanding of front-end web technologies (HTML, CSS, and JS) 📍
Basic understanding of Node.js 👍
Comfortability with working in the terminal or command line

Getting Started

According to Electron's Website, they define Electron as a way to "build cross platform desktop apps with JavaScript, HTML, and CSS."

Create a new directory for the project Open up your local machine's command line and cd into the destination where you would like to place the project in.

mkdir hello-world

Then cd into the newly made directory

cd hello-world

Now that we created the directory, we must create a package.json, where we store our project metadata such as title, version, packages we used, and more.

Open your favorite code editor to edit the project:

Create a new file called package.json, and copy and paste the sample package file:

{
  "name": "hello-world",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

Installing ElectronJS through npm

To get started with ElectronJS, we will have to install Electron through Node Package Manager or npm.

npm install --save-dev electron

This will get the necessary packages to work with Electron from the npm registry.

ElectronJS Development

We will need to create a JavaScript file called main.js in our project's root directory. Go ahead and create a new file called main.js in the root.

Paste in the following code for main.js:

This is the main.js code from the ElectronJS Guide

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

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Now create an index.html file to display our web application's contents like a website.

Copy and paste the code:

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

Running our application Checklist ✅

main.js
index.html
package.json

Once you have all of the files above 👆, you may run you Electron application!

npm start

🎉🎈 Success!

Conclusion

Congrats 🎉 on getting started with Electron JS! Now you can create desktop applications of your own to show the world! You can add functionality and content to your application using the index.html file like you would with a website! Feel free to leave feedback using the comments below :)