Atom Electron – formerly known as Atom Shell
Atom Electron is equal to NW, and offers a cross platform
Here I will share my notes from my first go at writing a desktop application using Atom Electron,
Installation – (OSX)
This is how I got Electron up and running on my Mac. I did a NPM install and downloaded rebuild binaries.
In a terminal window I wrote:
sudo npm install electron-prebuilt -g
Runtime – install and run once using Ctrl-click “open”
Electron requires a runtime, so I downloaded an OS X app – from Electron github releases page. I found out that the version to install on OS X is the “..darwin-x64.zip” file. Simply download and unarchive the zip file. I then moved the Electron.app to the programs/apps folder (in practice installing the app).
As the app is downloaded from an unknown source the app will not run if you click it. You need to Ctrl+click and choose “Open” to execute the file. Using this approach has the advantage that you can also launch apps it from a terminal window without using “sudo” (administrator) command.
Ready for “Hello world”
I almost always do a “hello world”, and simply copy’n’paste any hello world code. Electron has a simple Quick start page which takes you through this start up process.
One thing which I did was to make NPM build the
package.son for me. So after I had made the
main.js file I ran this command in the terminal:
and answered all the question of cause.
Running the application
There are various ways of running your application, it is a matter of taste which one you prefer. You can run it through the terminal, you can open the Electron app and drag your application to the launch window or you can change the system to let you open it from finder.
Launch using terminal
- Open a terminal in the folder of your app
- If your app is named “main.js” fire this command:
Then you app should open a window with your hello world app. You may have to prefix the command with the
Convert precompiled Electron.app into your app
Just discovered that the Electron app is actually just a runtime which should be used for your app too. So reading the Application distribution page I tried to do this:
- Renamed my app folder to “app”
- Moved my app folder to “/Applications/Electron.app/Contents/Resources”
- Renamed the “Electron app” to “HelloWorld.app”.
This makes the Electron app in my application folder into my hello world app, and it can now be started as other native desktop apps! For instance I can Ctrl-Space and type “HelloWorld” + enter and thereby launch my Electron app, cute!
Debugging using console.log – where can I see the log?
console.log to write out debug information. So I also did in my main.js file, but where did the information goto? It seems that currently you need to run the app from the terminal to see the logged information.
To recap, I launch my app like this:
In my hello world app I loaded a website into the window. I wanted to extract images from that page to data-uri (base64 encoded images) and therefore the images should be loaded, but the page had made a trick. They used a data attribute “
The BrowserWindow object was used to open a new window, and I then listened on the
Of cause! Loading a file is as simple as using node.js fs package
So, I forgot – we are in a node.js context so all the nice packages can be used inside your app. So I put a JS file inside a lib folder, and using the global variable “
“Some philosophical point of views
Electron is so great! You can finally build desktop apps using your favorite tools, like you do when doing front-end implementation of webpages. Webpages have transformed into full blown native cross platform applications! Did you know that Slack app is written in that manner? That is according to “Build on Electron” page on the Electron github page.
With Electron (and NW.js) w
ebpages have transformed into full blown native cross platform applications!
I expect that we will see a whole lot of inspiring new cross platform desktop apps when we let out front-end developers to the formerly back-end developer territory. Like when Microsoft released Visual Basic. I for one believe that much of the success of windows platform was because Visual Basic eased the access into desktop app development, and millions of more or less simple windows apps was programmed by new programmer types. Most of the apps were more or less useless, but they were important anyhow, shaking the mindset of all developers on the platform.