Simple Method to Create a Electron Hello World Application

Electron is a framework for building desktop apps with CSS, Javascript and HTML. The apps will be cross-platform and work on Windows, MacOS and Linux distributions.

Installing Node.js

First we need to install node.js. So go ahead and do that.

Installing electron pre-built

After installing node.js, open nodejs command dialog and execute the following command in your selected directory.

npm install electron-prebuilt

File structure

In its most basic form an electron app needs three files. package.json, main.js, and index.html which make the folder structure to look like this:

electron-hello-world/  — assuming directory created in the above step.

  • index.html
  • app.js
  • package.json

Create a folder and add those files and let’s walk through them one by one.


Let’s add content to package.json. We need a name, a version and a main setting that points to a script that will handle the starting up of the app. If main is not present the Electron will look for a file called index.js.

"name": "menu",
"version": "1.0.0",
"description": " electron-hello-world ",
"main": "app.js",
"scripts": {
"start": "electron ."
"author": "your name",
"license": "ISC",
"dependencies": {
"electron": "^1.4.14"
"devDependencies": {}


As mentioned above the app.js is required to handle the startup of our application. Let’s add this content to it.

const electron = require('electron');
const app =;
const path = require('path');
const BrowserWindow = electron.BrowserWindow;
var mainWindow;
mainWindow = new BrowserWindow({ width: 1024, height: 768, backgroundColor: 'white' , foreColor:'black'});

mainWindow.loadURL('file://' + __dirname + './index.html');


The index.html takes care of the gui.

<!DOCTYPE html>
<title>Hello World Electron</title>
<h1>Hello World!</h1>

To Run Electron Hello World App

Now let’s get back to the command prompt and type “npm start”.  That will start Electron and run the app that we are currently building.

You just successfully developed an Electron Desktop application!


  • "Sathiamurthi works as Associate Architect with Trigent Software. With over 14+ years of software development experience he specializes in providing secure, reliable and scalable solutions for legacy applications and software products. Sathiamurthi comes with expertise in Microsoft Technologies, designing architectures for various Microsoft-based solutions, architectures/ methodologies such as MVC, REST, JSON, API, WCF, Test-Driven development, SQL Server, and Design Patterns and frameworks such as Angular JS, Laravel. He is also experienced in Agile/SCRUM."