#visualstudio2017

If you've stumbled upon this post, it most likely means that you're trying to install or update Visual Studio 2017 Community or Enterprise using the Visual Studio Installer tool. As you can easily notice, the installation phase is splitted into 2 steps: the download, which happen first, and the actual install. The issue we're talking about is related to the installation phase of the Win10SDK module, precisely Win10SDK_10.0.17763 at the time of writing - but we know that the issue also happened before and will most likely happen with future versions of the Win10SDK package as well.

The problem

The issue can be easily summarized with the following screenshot:

When this happens, the window GUI appear to be still responding and not locked up: however, pressing the Cancel button does nothing and basically hangs the tool undefinitely until its process is manually killed using Task Manager. Such scenario can be troublesome, especially if you're performing a "standard" VS2017 update, because you will be basically unable to launch Visual Studio until you fix that.

The setup for this installation of Visual Studio is not complete. Please run the Visual Studio Installer again to correct the issue. needless to say, restarting and re-running the Visual Studio Installer will bring the same result: when it will try installing the Win10SDK, the tool will become stuck again.

The fix(es)

As this post from the VS developer community explains, the problem's cause is related to a silent PowerShell script that gets executed during the Windows App Certification Kit installation phase that Workaround #1 Luckily enough, the workaround for such issue is actually rather simple: Navigate to the Microsoft Windows 10 SDK official web page. Download the Win10SDK installer executable (or the ISO image if you prefer). Run it manually using administrative priviledges (very important). After the setup is done, launch the Visual Studio Installer and install (or update) Visual Studio 2017. As you can see, installing the SDK with administrative priviledges is the key to work around the Windows App Certification permissions issue without having to mess with the existing Local Group Policies. If you don't do that, you'll most likely get the following:

Workaround #2 If running the Windows 10 SDK installer with administrative priviledges is not enough to fix your issue, you can try to temporarily enable the Local Group Policy using the Windows built-in Group Policy Editor in the following way: Launch the Group Policy Editor: Start > Run > gpedit Navigate through Computer Configuration > Administrative Templates > Windows Components > Windows Powershell (see screenshot below) Set the Turn on Script Execution switch to Enabled, then sets its execution policy to Run all scripts.

Once done, try install or update Visual Studio again. IMPORTANT: Remember to revert this change right after installing or updating Visual Studio, as leaving it like that will pose a non-trivial security issue on your machine. Workaround #3 If none of the above workarounds worked, the last thing you can do is to uninstall and reinstall Visual Studio from scratch using the Visual Studio Installer tool: such procedure can be time-consuming, but is 100% guarranteed to work and will bring you back a clean installation of the latest version of VS2017.

Conclusion

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: Atom, Discord, Keybase, Microsoft Teams, Microsoft Visual Studio Code, Shift, Slack, Signal, Twitch.tv, WhatsApp, Yammer, 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.

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.

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:

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.

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:

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:

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:

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:

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!

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:

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

Issues with Lightweight Solution Load in Visual Studio 2017

One of the coolest feature in Visual Studio 2017 is the ‘Lightweight Solution Load’ which greatly reduces the Visual Studio startup time and the overall memory consumption. However I have bumped into multiple issues working with Lightweight Solution Load feature turned ON in VS2017. In this article, I will list down few of my observations, so that you are aware of these limitations.

What is…