Some time back I kicked the tires of Electron. I really fancy the idea that you can use web technologies on your desktop.
With this mindset I decided to try out Electron. In this first post in a series of Electron posts, I’ll create a small and simple desktop app using Electron.
In this first post I’ll be showing how quickly you can get up and running with Electron.
Once again, npm is your friend. We create a folder in which we would like to hold our Electron desktop application:
Then inside this folder we run
npm init. You then have to answer some questions about application. This will create the
packages.json file which contains some metadata about your application. This
packages.json is mandatory in any Electron application.
Now we need to install the
This will install the
electron-prebuilt package and store this dependecy as a development dependency in the
packages.json, we created above.
Now go on and create a folder that will hold the application specific files:
I’ve called the folder
app. In this folder we once again run the
npm init command, and answer the questions. Now we need to edit the
packages.json file created. When you open the file in your favorite text editor it should look like this:
For my own convenience I change the
main.js, so my
packages.json will look like this:
Now create the
main.js in the
app folder. In this very trivial sample application the
main.js will look like this:
In the first line we require the
app, which is our application. Next we require a
browser-window. This is the actual Electron shell, which will host our application. The
mainWindow variable will hold a reference to an instance of the
Then we hook up our application by listening to the
ready event. So, when the application is ready we create the
BrowserWindow instance and sets its dimensions. Then we load some content into the
mainWindow by using the
loadUrl method can take anything basically. In this case we want to show a local
index.html, but there is nothing that can stop you from host a website inside your Electron application. I could host and distribute this blog as a desktop application like this:
The last line in my
main.js is an event handler, which will release the reference to the
mainWindow object upon the application is closed.
We’re almost ready to take this little beast for a spin. We need to create
This is very simple.
Now, to launch this application we move to the outer folder (the folder containing the app folder). Here we can run the following command:
Now your first Electron application is airborne. That’s was easy, right? In the following posts we’ll extend this simple application with more advanced features. On the top of my mind, the next post will focus on setting up gulp for building, running, packaging, and distributing the application. Other topics will be setting up AngularJS, crash reporting, distribution, automatic updating, debugging, etc.
Throw me a comment for suggestions.