Getting Started with Electron

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'