- Electron framework provides cross platform desktop application development using JavaScript.
- In this demo, “We will learn to install electron and setup application development environment”.
- Electron can be installed as npm package using npm install electron-prebuilt –save-dev command.The following screenshot shows the terminal with electron installation.
- The project structure contains the index.html,main.js and package.json file and looks like following screenshot.
- The content of package.json is as follows.
{
"name": "ElectronDemo",
"version": "0.0.1",
"description": "Electron desktop Application",
"main": "main.js",
"repository": {
"type": "git"
},
"keywords": [
"electron"
],
"author": "sandeep",
"license": "ISC",
"devDependencies": {
"electron-prebuilt": "^0.27.2"
}
}
- The content of main.js is as follows.
var app = require('app'),
BrowserWindow = require('browser-window'),
mainWindow = null;
require('crash-reporter').start();
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
- The content of index.html file is as follows.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
hello
</body>
</html>
- The desktop application can be start by issuing electron command in terminal,The following screenshot shows the command to lunch desktop application.
- The output of desktop application look like following screenshot.
