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)
Run the node installer from https://nodejs.org/en/download/
Now I have the newer version on OSX
Create a folder for you Electron project (e.g ~/Documents/ElectronApps/HelloWorld ).
Navigate to that folder in the terminal
Now type: npm init
Installing Electron
verbose was added to allow you to see as the install could take a while
Create a javascript file as specified in your package.json
Contents of app.js
Update the package.json to include a start command (electron .)
Create an index.html file
Contents
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.
If you receive the error “-bash: electron-packager: command not found” try and install the packager globally
Now we will package the app for OSX
I can now uninstall the electron packager from my project as it is now installed globally
Building apps on OSX
Build an OSX App
Rebuild an OSX app
This will build an OSX app
Building apps on Windows
1) Ensure nodejs is installed (reboot if required)
3) Install Electron Packager Globally
4) Don’t forget to install Electron on Windows
5) You can now package a Windows executable (TIP: Run the command as an Administrator to prevent write errors).
Advanced electron-packager commands
Build and specify a build number
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
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 id=”30″ title=”Ask a Question”]
Revision History
v1.0 Initial Post (24th Sep 2017)
etc