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
Advertisement:
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)
|
1 2 |
node --version v0.12.4 |
Run the node installer from https://nodejs.org/en/download/
Now I have the newer version on OSX
|
1 2 |
node --version v6.11.3 |
Create a folder for you Electron project (e.g ~/Documents/ElectronApps/HelloWorld ).
Navigate to that folder in the terminal
|
1 2 3 |
cd ~/Documents/ElectronApps/HelloWorld/ pwd /Users/simon/Documents/ElectronApps/HelloWorld |
Now type: npm init
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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
|
1 |
sudo npm install electron --save-dev --verbose |
verbose was added to allow you to see as the install could take a while
|
1 2 3 4 |
... 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
|
1 |
sudo nano app.js |
Contents of app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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 .)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "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
|
1 |
sudo nano index.html |
Contents
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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.
|
1 |
sudo npm install electron-packager --save-dev |
If you receive the error “-bash: electron-packager: command not found” try and install the packager globally
|
1 |
sudo npm install electron-packager -g |
Now we will package the app for OSX
|
1 2 3 |
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
|
1 |
sudo npm remove electron-packager |
Building apps on OSX
Build an OSX App
|
1 |
electron-packager . |
Rebuild an OSX app
|
1 |
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
|
1 |
npm install electron-packager -g |
4) Don’t forget to install Electron on Windows
|
1 |
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).
|
1 |
electron-packager . |
Advanced electron-packager commands
Build and specify a build number
|
1 |
electron-packager ./ helloworld --build-version=0.0.1 |
Build ap with icons
|
1 |
electron-packager . --overwrite --arch=x64 --platform=darwin --prune=true --out=release-builds --icon=assets/icons/mac/icon.icns |
Building linux app
|
1 |
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
Revision History
v1.0 Initial Post (24th Sep 2017)
etc
[…] possible solution is using the Electron […]