Create your first Hello World Electron app on OSX

Electron allows you to build cross-platform desktop apps with JavaScript, HTML, and CSS based on NodeJS. Electron’s home is https://electron.atom.io

Electron will allow you to build a web app and package it up to run locally with HTML and bootstrap or more advanced widgets like https://www.jqwidgets.com/ or ExtJS. Marc Fearby is creating a Git starter project for Electron with Sencha here. You can happily develop a local web app and have back-end available by an APIs if need be (read my guide on setting up and configuring a server and securing it and installing an SSL certificate).

Nodejs

Electorn requires NodeJS, please confirm your node version (in my case I have an old version installed)

node --version
v0.12.4

Run the node installer from https://nodejs.org/en/download/

Now I have the newer version on OSX

node --version
v6.11.3

Create a folder for you Electron project (e.g ~/Documents/ElectronApps/HelloWorld ).

Navigate to that folder in the terminal

cd ~/Documents/ElectronApps/HelloWorld/
pwd
/Users/simon/Documents/ElectronApps/HelloWorld

Now type: npm init

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (HelloWorld) helloworld
version: (1.0.0) 0.0.1
description: Hello World in Electron
entry point: (index.js) app.js
test command: 
git repository: 
keywords: electron,hello,world
author: Simon Fearby
license: (ISC) 
About to write to /Users/simon/Documents/ElectronApps/HelloWorld/package.json:

{
  "name": "helloworld",
  "version": "0.0.1",
  "description": "Hello World in Electron",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "electron",
    "hello",
    "world"
  ],
  "author": "Simon Fearby",
  "license": "ISC"
}

Installing Electron

sudo npm install electron --save-dev --verbose

verbose was added to allow you to see as the install could take a while

...
Downloading electron-v1.7.8-darwin-x64.zip
[======>                                      ] 16.4% of 48.41 MB (319.96 kB/s)
...

Create a javascript file as specified in your package.json

sudo nano app.js

Contents of app.js

const elcetron = require('electron');
const app = electron.app;

const path = require('path');
const url = require('url');

const BrowserWindow = electron.BrowserWindow;
var mainWindow;

app.on('ready', function() {

        mainWindow = newBrowserWindow({width: 1024, height: 768, backgroudColor: '#ffffff'});

        mainWindow.loadURL(url.format({pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true } ));

});

Update the package.json to include a start command (electron .)

{
  "name": "helloworld",
  "version": "0.0.1",
  "description": "Hello World in Electron",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [
    "electron",
    "hello",
    "world"
  ],
  "author": "Simon Fearby",
  "license": "ISC",
  "devDependencies": {My contents
    "electron": "^1.7.8"
  }
}

Create an index.html file

sudo nano index.html

Contents

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World...</title>
</head>

<body>
Hello World...
</body>

</html>

Now we can start the app.

Electron Package Manager

You can install the Electron Packager to make Apps for desktop OS’s. Read more at https://github.com/electron-userland/electron-packager

Install the electron-packager module into your existing project.

sudo npm install electron-packager --save-dev

If you receive the error “-bash: electron-packager: command not found” try and install the packager globally

sudo npm install electron-packager -g

Now we will package the app for OSX

sudo electron-packager .
Packaging app for platform darwin x64 using electron v1.7.8
Wrote new app to /Users/simon/Documents/ElectronApps/HelloWorld/helloworld-darwin-x64

I can now uninstall the electron packager from my project as it is now installed globally

sudo npm remove electron-packager

Building apps on OSX

Build an OSX App

electron-packager .

Rebuild an OSX app

sudo electron-packager . --overwrite

This will build an OSX app

Building apps on Windows

1) Ensure nodejs is installed (reboot if required)

2) Test your app (npm start)

3) Install Electron Packager Globally

npm install electron-packager -g

4) Don’t forget to install Electron on Windows

npm install electron --save-dev --verbose

5) You can now package a Windows executable (TIP: Run the command as an Administrator to prevent write errors).

electron-packager .

Advanced electron-packager commands

Build and specify a build number

electron-packager ./ helloworld --build-version=0.0.1

Build ap with icons

electron-packager . --overwrite --arch=x64 --platform=darwin --prune=true --out=release-builds --icon=assets/icons/mac/icon.icns

Building linux app

electron-packager . --overwrite --icon=assets/icons/png/icon.png --platform=linux --arch=x64 --prune=true --out=release-builds

Use sites like https://iconverticons.com/online/to generate icns files and place them in “assets\icons\mac\icons.icns”

View electron-packager issues here: https://github.com/electron-userland/electron-packager/issues

More to come..

Donate and make this blog better

Ask a question or recommend an article
[contact-form-7 404 "Not Found"]

Revision History

v1.0 Initial Post (24th Sep 2017)

etc

Personal Development Blog...

Coding for fun since 1996, Learn by doing and sharing.

Buy a domain name, then create your own server (get $25 free credit)

View all of my posts.

Create your first Hello World Electron app on OSX

Advertisement:

Popular

Security

Code

Tech

Wordpress

General