How to create an Electron app?

#electron #node #javascript #codenewbie

Electron

Simplest definition: Electron is a framework that allows creating a desktop application for all the platforms (Windows, Mac, and Linux). Some of the examples of desktop applications that are built on Electron are Atom, Visual Studio Code, Github Desktop. Could you believe that the Visual Studio Code is built on HTML, CSS, and NodeJS?

A little deep definition: Electron is a GUI framework that combines Chromium rendering engine and Node.js runtime to allow browser process and several other renderer processes to run the application logic. The browser process runs the logic of app (main.js => main entry point for an application) and another built-in rendering process creates windows by rendering HTML and CSS.

Why use Electron?

One of the problems I experience all the time as a developer when I start developing a project is that I get hung up on for which platform should I approach for my project. Electron helps to develop a cross-platform application using basic web technologies. Usually, you would use different web technologies to create an application on different platforms, but that is not the case with Electron.

Another reason to use Electron is because of code and app management. As a developer, you don't need to maintain different projects for different major platforms. You could develop code for all the major platforms in one project and encounter all the bugs and problems in one place. You also don't need to code new features and enhancements separately for different projects from different codebases.

How to create an Electron app?

Alright, let's get started to creating a simple electron app.

First and foremost, create a local project folder on your machine. Then, write this command in the terminal from the root project level.

npm init

Check out the package.json

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "Tutorial for getting started on building an elctron app :)",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sukhbir Sekhon",
  "license": "ISC"
}

If the main is not present in the package.json, Electron will try to load the index.js as it normally does with node.js.

Now, add a start script to give instructions on how to start an application. Since this is not a normal node app, so you wouldn't start by 'node .' command. Instead, you will start an app like this,

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "Tutorial for getting started on building an elctron app :)",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Sukhbir Sekhon",
  "license": "ISC"
}

Install the electron framework package using npm.

npm install electron --save

Code

As I mentioned earlier, Electron uses node.js runtime that means you could use javascript principles to create an app. You can find all the Electron APIs here.

Let's create an entry point or main.js for our application and import all the Electron module.

const electron = require('electron')

Create an 'app' and 'BrowserWindow' variables from the 'electron' module

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

A desktop application doesn't work like other browser pages or mobile apps. It needs a desktop window to showcase different rendering pages just like any other desktop application.

Let's create a function that will create a desktop window with custom size preferences that will load the HTML file.

function createWindow () {

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

  win.loadFile('index.html')
}

Since some APIs in the back-end takes time to load so we need to make our app smart that only creates windows after every API is loaded and all the events occurred including asynchronous functions.

app.whenReady().then(createWindow)

It's a good practice to quit an app and kill the process if the window is closed by the user.

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

There are different names for different platforms:

Windows: win32

MAC: darwin

Linux: linux

Since it is common on macOS to re-create a window in the app when the dock icon is clicked and there are no windows open.

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

Finally, let's add the basic index.html page for the rendering process to render the page and showcase it inside the window.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Created my first Electron App! :)</h1>
  </body>
</html>

Run

Once you have main.js, index.html, and package.json components, then finally run the app!

npm start

You did it! See how simple it was to get started on the Electron app. You can integrate Vue.js, React.js, Backbone.js and many other frameworks to create a renderer. 💭

Just leaving an example of the Vue.js electron app for some inspiration!