Home » Web Development » Electron » Getting Started With Electron Development

Getting Started With Electron Development

Electron is a framework that allows you to write desktop applications using web technologies.  It allows you to write applications that look like desktop applications, but under the hood, they are web pages.  Electron also allows you to access the power of the NodeJS library and to access the resources of the local computer (just like regular applications do).  In my opinion, one of the better examples of what Electron can do for you can be seen in the Postman REST tester.  If you download Postman, you’ll find that it looks very similar to a regular application, but it isn’t!

In this post, I’ll walk through the steps to get a basic Electron development environment running and we’ll do the equivalent of a Hello World in Electron.

Download and Install Prerequisites

Before creating what amounts to a “Hello World” in Electron, we need to install several prerequisites.

NodeJS can be installed from  www.nodejs.org/en.  At the time of this writing the recommended version is v6.11.2 LTS.  After the installer has downloaded, go ahead and execute it.  It will install to the folder c:\program files\nodejs.

NodeJS provides the npm command which is how we’ll get our modules in just a little bit.

GIT can be installed from https://git-scm.com/

As of this writing, the latest version is 2.10.1 released on Oct 3, 2016. The download is 31 MB in size.

Create Electron Development Environment

Now we can start creating our Electron development environment.

Create a folder where you will put your electron apps.

I created c:\_\my-electron-programs

I like to prefix my folders with an underscore (_) because they sort to the top of the list in Windows Explorer.

Go into the c:\_\my-electron-programs folder and enter:

This will install electron globally to your PATH. This only needs to be done once, but since this is the first time you’ve used Electron I’m assuming you have never installed it.  This will take a little while to complete based upon the speed of your Internet connection.  In my case, it took about 10 minutes, but I’m on a slow network.

Now we will use the electron-quick-start template available at github as our application’s template.

While in the folder c:\_\my-electron-programs, enter the following command to clone the electron-quick-start repository onto your local drive.

After the clone has completed, navigate to the newly created folder:

c:\_\my-electron-programs\electron-quick-start

 

Install dependencies that are needed by the electron-quick-start program by executing the following command which will download yet more files:

After the command has completed, run the Electron application by executing the command:

and if all went well, you should be presented with a browser window saying Hello!

electron-quick-start-app

Next, go update your resume and say that you know Electron 🙂  Just kidding!

What Just Happened?

You compiled and ran your first Electron application.

If you look at the electron-quick-start folder you’ll find that several files were created.

electron-quick-start-folder-structure

To get a feeling for what is going on, let’s start with the file package.json.  Open this file in your favorite text editor (Notepad++, Sublime, whatever…).

package.json file format

This file describes to the compiler which file and what parameters will be executed by Electron when npm start is executed.  To identify the entry point, refer to the key “main” and you’ll find that it has the value “main.js”.  This, of course, means that “main.js” will be the entry point to our Electron application.

There are many more keys we can set.  Here are some of the more common:

  • description
  • keywords – which are used when your package is listed in the npm search
  • homepage – is the URL to the project home page
  • bugs – is the URL to the project’s issue tracker
  • license
  • author – hey, that would be us!!!
  • contributors – did anyone help us, well, most likely since no man (or woman) is an island
  • main – we just talked about that
  • repository – where the code lives
  • scripts – is a dictionary of scripts to run based on npm-scripts life-cycle events.  Yea, we’ll get to that later on.
  • dependencies – is a list of dependencies and their version that our application requires.
  • devDependencies – is another list of dependencies and their version which are only installed when –dev option is specified.

main.js

If you open main.js in a text editor you’ll find a bunch of code that looks way complex.  Not to fear, scan through the code to get a basic understanding of the structure and you’ll see the following:

Since we’re all programmers here we can surmise that app.on(‘blah’, function) is some sort of event handler for events.  It appears that app.on() let’s us define an event to listen for and then when we receive that event we’ll call either a named or an anonymous function.

OK, not too bad.  But, my next question is what events can I listen for.

app.on Events

As it turns out, there are a number of different events that app.on can listen for.

  • activate – application is launched the first time or a re-launch is attempted
  • will-finish-launching – emitted when the application has finished basic startup.  On windows, this event is the same as the ready event.
  • ready – emitted when Electron has finished initializing.
  • window-all-closed
  • before-quit
  • will-quit
  • quit
  • browser-window-blur
  • browser-window-focus
  • browser-window-created
  • web-contents-created
  • certificate-error
  • select-client-certificate
  • login
  • gpu-process-crashed
  • accessibility-support-changed

Hmm, that’s a lot of events.

app.on(‘ready’)

What we’re really interested in is the app.on(‘ready’) event.  Referring back to the code we can see that it calls “createWindow”.

“createWindow()” is a function that is also defined in main.js.  If you look at this function you can pretty much reason out what is being done.

  • Create a browser window with a size
  • Load a URL into the browser window – index.html in this case which just happens to be in the same directory
  • add an event listener for window the browser window is closed.

index.html

So, what about the index.html?  Let’s take a look…

Well, for the most part, this looks like a regular old HTML file except for that “require(…)” statement on line 17.

index.html and require()

If you review the directory of files you’ll find the renderer.js file and if you open and read the contents, you’ll find this file is how the Node.js libraries are loaded.

Well, that’s about it for a post.  I don’t want to dig too much deeper in one post so we’ll save more dissection until next time.

 

Wrap Up

There’s so much more to learn, but this short intro got you up and going and proved that you can compile and run Electron.