Skip to main content
Electron Word Application

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.

package.json

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": {}
}

App.js

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 = electron.app;
const path = require('path');
const BrowserWindow = electron.BrowserWindow;
var mainWindow;
app.on('ready',function(){
    mainWindow = new BrowserWindow({ width: 1024, height: 768, backgroundColor: 'white' , foreColor:'black'});
    //mainWindow.loadURL('index.html');

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

index.html

The index.html takes care of the gui.

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

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 Mahalingam

Sathiamurthi Mahalingam

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.

5 thoughts on “Simple Method to Create a Electron Hello World Application

  1. You actually make it seem really easy along with your presentation however I in finding this topic to be actually something that I believe I’d by no means understand. It kind of feels too complicated and extremely wide for me. I am looking forward in your subsequent publish, I will try to get the hang of it!|

  2. Having read this I thought it was very informative. I appreciate you taking the time and effort to put this article together. I once again find myself spending way to much time both reading and commenting. But so what, it was still worth it!

  3. I love your blog.. very nice colors & theme. Did you create this website yourself? Plz reply back as I’m looking to create my own blog and would like to know wheere u got this from. thanks

Comments are closed.