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!
