Home » Web Development » Electron » Create Your Own Electron Desktop Application Tutorial

Create Your Own Electron Desktop Application Tutorial

In this post, we’ll walk through the steps to create your own Electron desktop application. If you haven’t ever used Electron before you should start out with the  “Getting Started With Electron” tutorial.

Here is the list of tools that you will need for this tutorial.

Product Comments Link
NodeJS Required for this tutorial. We will need the npm command that is provided by NodeJS https://nodejs.org/en/
Atom Text Editor Not required but it's a nice editor for working with Electron https://atom.io/
Cmder Console Emulator Not required but if you spend a lot of time working with the console this is a nice tool to have. It provides better copy and paste functionality than the normal Windows console. It also supports tabbed windows so you don't have to have a bunch of console links in your taskbar. http://cmder.net/

 

Create the project folder

I normally create my development folders in a folder called _ (that’s an underscore) because it sorts to the top of the list in Windows Explorer.  Then, I have of bunch of project folders based on the type of work I’m doing.  This has worked pretty well.  So, create the following folder on your system:

c:\_\my-electron-projects\first-electron-project

Create package.json file

The package.json file is the heart of an Electron project.  Fortunately, to create one is very simple.  You can read up on the details of the “npm init” command on the NodeJS website.  For this tutorial, we will call npm with the “-y” argument which tells the init command to use defaults and not to prompt for any information.

After running this command you should find the package.json file in the folder c:\_\my-electron-projects\first-electron-project.

For those using the Atom text editor, there’s a nice feature that shows the folder and files in the left pane.  You can have just a single project open by selecting File->Open Folder.  Or you can have a bunch of projects open by selecting File->Add Project Folder…

Here is the contents of the package.json that are created by default…

Go ahead and update the contents as shown below.  Use your own name of course 🙂

By adding a “start” command to the scripts array, we can now use the npm command “npm start” which will actually call electron . .

Install Electron

Open a command prompt to the folder c:\_\my-electron-projects\first-electron-project  and execute the following command.

This command will download electron using the NodeJS Package Manager and then update your package.json file to add the dependency on Electron.  After running this command your package.json file should look like:

Notice how the devDependencies section has been updated with electron and the ^1.4.6 version.  I don’t know about you , but I thought this was pretty cool.

Create index.js

You might’ve noticed the line in the package.json file that says “main”:”index.js”.  This indicates that our project will start by reading the index.js file.  You can put this file is a sub-folder or even change the name of the file to something else.  For this tutorial, we are going to use the default.  Go ahead and create the index.js file directly in the folder c:\_\my-electron-projects\first-electron-project and add the following contents:

This will, as its name suggests, print out “hello world” to our console when we run the program.

Start Electron

Open a command prompt to the folder c:\_\my-electron-projects\first-electron-project and enter:

which, you should then see the following at the command prompt…

What’s interesting is that electron is still running.  You’ll probably notice that your command prompt hasn’t returned.  To stop electron, just <ctrl><c> in the console.

 Add a UI

Of course, now that we have a running electron program it would be very nice to also have a UI.  To create one, change your index.js as shown below.

The first and second lines load the “electron” module using the NodeJS API.

After that, on line 3, we create an variable to hold our Electron BrowserWindow using the Electron API.

Lastly, using the Electron API, on line 5, we setup a listener for the “ready” event which is raised by Electron after it has been initialized.  At this point, you should review the Electron app events so you know what’s available.

Then finally, on lines 6 through 8, we create an instance of the BrowserWindow with a size of 400 by 400 pixels.

Go ahead and run the “npm start” command and you should see the following dialog.

electron-browser-window

It’s not much to look at yet, but it is a desktop application that has a menu bar and looks pretty much, like the other desktop applications you have.

Also, instead of having to enter <ctrl><c> to stop the program, you can hit the (X) or select File->Exit.

Add Contents to the UI

While the Electron BrowserWindow provides the framework for a desktop application, we still need to create the content of the application.  To do this, we’ll need to create an HTML file.  Go ahead and create a file called index.html in the folder c:\_\my-electron-projects\first-electron-project with the following contents…

Now we need to associate the index.html with our index.js file.  To do this, update your index.js file with the following contents:

This code will once again, rely upon the NodeJS API to load a module called “url“.

It will then use the “format” method of the url module to load index.html file.

Go ahead and run the “npm start” command and you should see the following dialog.

electron-browser-window-html

Notice that the title changed to match what was defined in index.html and also, our <h1> tag is shown as the content.

Summary

You now have a fully functional Electron desktop application.  You have full access to the NodeJS API and Electron API’s available to you as well as the entire world of JavaScript, HTML and CSS to create whatever you need.

For my projects, I prefer to use React for my development which I’ll go into more details in another post.