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!

comments
0