Visual Studio 2017 – How to setup a new Electron project and run a Hello World sample A guide explaining how to create a new Electron Project (or Solution) in Visual Studio 2017 and run the electron-quick-start GitHub project

Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

If you are a software developer and you don’t know Electron as of today, you definitely should start to gather some info about it. In very short words, Electron – formerly known as Atom Shell – is an open-source framework designed to build desktop GUI applications using HTML, CSS and JavaScript. To put it in other words, it allows web developers to use their existing knowledge to create native desktop clients for the most used operating systems – including Windows, Linux, MacOS and so on. The project is developed and maintained by GitHub and runs using Node.js runtime for the back-end part and Chromium for the front-end.

The framework has been released in 2013 and immediately gained a lot of attention among the various web (and non-web) developers communities due to its simplicity and easeness of use. As a result of that, a lot of desktop application built with Electron have been released in the latest few years, including – yet not limiting to: AtomDiscordKeybaseMicrosoft TeamsMicrosoft Visual Studio CodeShiftSlackSignalTwitch.tvWhatsAppYammer, and even Skype.

For all the above reasons, in the unlikely scenario that you never heard about it, you definitely need to catch up. That’s precisely why we’re publishing this post: in the upcoming paragraphs we will show you how to setup and configure your first Electron project in Visual Studio 2017 and how to create your first Electron application using the “Hello World” sample available with the official electron-quick-start GitHub project.

This tutorial has been vritten for VS2017, yet it will also work well with Visual Studio Code as long as the VSC-required steps are followed.[/type]

Installing Prerequisites

For the sake of simplicity, we’ll take for granted that you already have Visual Studio 2017 Community (or Enterprise, or Visual Studio Code) installed on your development machine. If that’s not the case, install it before continuing.

Since Electron does require Node.js, the first thing to do is to open the Visual Studio 2017 installer and check that the Node.js development tools are installed: if they’re not, be sure to install them.

Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

That way you won’t need to install Node.js separately, as VS2017 will install it for you; on top of that, you will get the Node.js Visual Studio templates, which we’ll be using in a few.

Creating the Project

The next thing you have to do is launch Visual Studio 2017 and create a new Blank Node.js console application:

Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

Choose a suitable name for your project and solution files (we used Electron.HelloWorld for both of them) and click OK. As soon as you do that, the project will be properly initialized by Visual Studio: you will see a typical Node.js minimalistic boilerplate with a single app.js file, a package.json file and basically nothing more.

Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

Adding Electron

Open the package.json file and add the following lines to the JSON object included there:

HINT: Watch out for the comma before the 3 highlighted lines – you’ll need that too.

We’re using Electron v3.0.6 because it’s the latest stable at the time of writing.

Your updated package.json file should look close to the screenshot below:

Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

While you’re here, you can take the chance to change your application name, version, description.

Once you’re done with your edits, save the package.json file and wait for NPM to update your packages: in case it doesn’t fire automatically, you can trigger the update manually by using the Build > Update all bundles option from the topmost menu.

Here’s what your project should look like after the update:

Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

If all went well, you should be able to see the Electron package under the npm folder, as well as the nodule_modules hidden folder; in order to see the latter, you’ll have to enable the Show All Files feature in Solution Explorer.

Once done, right click to the project node and open the Properties panel to configure the Node.js executable path. Actually, since our Node.js project will need to use Electron, we need to configure that path to point to the Electron executable file instead:

Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

The path, as you can see from the above screenshot, would be \node_modules\electron\dist\electron.exe from your project’s root folder.

Hello World console sample

Now that we properly added and configured Electron, we’re ready for our first “Hello World” test!

Hit F5 and you should be able to see the following:

Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

As we can see, this is clearly a “console” test, as expected by our template’s app.js file content – a simple console.log command: definitely not fancy, yet it works!

Adding the GUI

In order to bring the GUI in, we need to tell our Electron app to instantiate a HTML page instead than using the console.log. Let’s see how we can do that!

Save your project/solution file, then close Visual Studio 2017 (very important!).

Once done, Launch your  favourite browser and navigate to the electron-quick-start GitHub project; use the clone or download GitHub feature to fetch a copy of the whole project on your local hard-disk drive as a single compressed file.

Extract everything in a separate folder, then copy the following files inside your Visual Studio 2017 project root folder, replacing the existing ones:

  • index.html
  • main.js
  • renderer.js
IMPORTANT: be sure that your Visual Studio 2017 has been shut down before doing that, otherwise you might be unable to overwrite some of these files.

Updating the Project

Launch Visual Studio 2017 again, reload the Node.js console project you created a minute ago and perform the following steps:

  • Delete the app.js file (you don’t need it anymore).
  • Right-click to the main.js file and select Select as node.js Startup file (or, if you prefer, manually change the Startup File value in the project’s Properties page).
  • Change the “main” parameter value  in the project.json file from app.js to main.js.

Alternatively, you can also replace the app.js content with the main.js content and then delete the main.js file, skipping the three steps above.

Hello World GUI sample

Hit F5 to perform a second Hello World test: this time our application should appear in all its HTML glory!

Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

Troubleshooting

In the latest versions of Visual Studio 2017 we experienced a strange bug (arguably a permission issue) that makes the application unable to open the index.html page, thus loading the Electron default page instead:

Visual Studio 2017 - How to setup a new Electron project and run a Hello World sample

In order to fix that, open the main.js file and replace the following line:

with this line:

That should fix that for good.

Conclusions

That’s it, at least for the time being: we’ll definitely write more about Electron in the near future, because it’s definitely one of the most promising development framework that we have seen in a while. Meantime, if you want to know more about it, we strongly suggest to take a look to the Electron official page and to the online docs.

This post is part of a series of articles, tutorials and guides on the Electron development framework. To read the other posts, click here!

 

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.