Electron Starter Kit
This guide shows you how to create a minimal Electron app that loads the provided 'index.html',
so you can deploy your web applications as a standalone desktop app; for this guide we will
use PowerShell for all operations.
1. Install Node.js
1. Go to https://nodejs.org
2. Download the LTS (Long-Term Support) version for your Operating System (OS).
3. Run the installer and ensure the "Add to PATH" option is checked.
4. Once installed, open PowerShell and verify installation of Node
and Node Package Manager (NPM):
node -v
npm -v
2. Create Your Local Project Folder
Create a working folder anywhere, e.g.:
Windows
mkdir C:\javaika-electron
cd C:\javaika-electron
Mac/Linux
mkdir ~/javaika-electron
cd ~/javaika-electron
3. Install Electron
Within the 'javaika-electron' directory in PowerShell, run the following command to install Electron.
npm install --save-dev electron
At this point you shoud observe the following files and folders under the 'javaika-electron' folder.
1. package-lock.json file (created when installing Node dependencies (i.e. Electron)
2. node_modules folder (where Node dependencies are installed)
4. Create Project Files
Inside the 'javaika-electron' folder, create the following files:
1. index.html
javaika-electron/index.html # Your local webpage
<!DOCTYPE html>
<html lang = "en-AU">
<head>
<title>Electron Example</title>
<meta name = "description" content = "Demo of running electron.">
<meta name = "viewport" content = "width=device-width, user-scalable=yes">
<meta name = "keywords" content = "electron demo">
<meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8">
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>
2. main.js
javaika-electron/main.js # Standard main script
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
function createWindow()
{
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js') // optional
}
});
// Load local HTML
mainWindow.loadFile('index.html');
// Open DevTools (optional)
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
3. preload.js
javaika-electron/preload.js # Preload script
// This runs before the renderer and can expose APIs securely
window.electronAPI = {
ping: () => 'pong'
};
4. package-json
javaika-electron/package.json
{
"name": "javaika-electron",
"version": "1.0.0",
"description": "Some description",
"main": "main.js",
"scripts":
{
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Some author",
"license": "ISC",
"type": "commonjs",
"devDependencies": {
"electron": "^39.2.7"
}
}
5. Run the Electron app
npm start
The application window should appear displaying the contents of 'index.html'
