paulwright.id.au

First Electron App Cheat Sheet

December 26, 2019

A quick walkthrough to create your own native Win32 or MacOS app in minutes.

Electron is a framework for creating native applications with Chromium web engine using JavaScript (Node.js), HTML, and CSS.

Preparation

Download and install the latest Node.js installer for your operating system. In this example we’ll use the Windows Installer.

If you don’t have a text editor I recommend Atom.io. You can use it as a windowed app and launch it from the command line. e.g. atom index.html

First Things

Open a PowerShell window. I like the new Windows Terminal app from Microsoft.

Navigate to your home folder or wherever you keep your files.
> cd ~/Documents

Make a directory for your Electron projects and subdirectory for your first project.
> md Electron/MyProject

Build your app

Navigate to your project folder, everything we do below is done from this context.
> cd Electron/MyProject

Create a package.json file using Node.js package manager
> npm init
Step through the defaults.. Enter, Enter…

Modify the package.json file to include the"productName" and "start" paremeters as shown in the example below…
> atom package.json

./package.json

{
     "name": "myproject",
     "productName": "MyProject",
     "version": "1.0.0",
     "main": "main.js",
     "scripts": {
       "start": "electron .",
       "test": "echo \"Error: no test specified\" && exit 1"
     },  
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "electron": "^7.1.7",
       "electron-packager": "^14.1.1"
     }
 }

Install Electron into the project
> npm install --save-dev electron

Create the Electron javascript.
> atom main.js

./main.js

// This example adds to the excellent tutorial at https://electronjs.org/docs/tutorial/first-app
// This example is a basic window that loads a Chrome web instance. 
// Cut and Paste into ./main.js
const { app, BrowserWindow } = require('electron')
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1000,
    height: 750,
    show: false,  // false to hide the window until DOM is ready
    backgroundColor: '#444',
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.removeMenu()
  win.once('ready-to-show', () => {  // wait for the DOM to be ready before showing window.
    win.show()
  })

  // Load the index.html of the app.
  //win.loadFile('index.html'); // load a Local file
  win.loadURL('https://paulwright.id.au/codefun/geminii/'); // Load a URL file.

  //Open the DevTools?
  //win.webContents.openDevTools()

  win.on('closed', () => {
    win = null
  })
}

// Main
app.on('ready', createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') { app.quit() }
})
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

Test it! Hack it! Make it!

> npm start

Build the Executable

> npm install electron-packager --save-dev
> electron-packager ./ (to build a package for the OS you’re using)
or
> electron-packager ./ --all (from an “Administrator” window with elevated privileges, to build packages for all operating systems)

pauls page