Create a Basic Desktop Application With Electron

Get started with Electron today

Image source: Wikimedia

If you work with JavaScript, you think that it’s a language of the web and if you would like to create a desktop application, you have to learn C# or something like that. But don’t despair! You can use the Electron.js library to create desktop solutions.

Let’s see how we can do it!

Setup

Essentially, Electron is a Node.js application. Like any Node application, it will have a package.json file with instructions and a list of dependencies.

Let’s create a new Node project:

yarn init
// or
npm init
// I prefer yarn

It will create a package.json with initial information about the new application. And we need to add a start to a scripts list in our package.json so we can run the Electron library. This is how the initial package.json looks:

Next we need to install the Electron library:

yarn add electron

Application

Now when the environment is ready, we can start working on the application. The first step will be creating index.js (or any name you specify in the package.json) file and importing the Electron library and its methods:

const { app, BrowserWindow } = require(‘electron’)

Next let’s declare parameters of out the application window and which HTML file to load with a simple JavaScript function:

Yes, we use HTML and Chrome to create desktop applications. Life can be weird, don’t worry.

Next we initialize our application and invoke the createWindow function:

app.whenReady().then(createWindow)