DEV Community: Michael Wilkinson

Installing NVM on Windows 11

Michael Wilkinson — Wed, 02 Mar 2022 17:32:38 +0000

Wrong Version of Node? What??

Picture a familiar scene to the JavaScript developer; a new project comes in and you reach for your favourite framework and "npm install" this or "npx create..." that and BOOM! You get an error message informing you that you have the wrong version of Node installed. Why?! This is because you are also working on an older project that requires you to use a particular version of Node so you can serve the project locally when coding on it. So, now what?

NVM to the rescue...right?

If you're a developer and your daily machine is a Mac or a Linux box and using anything to do with JavaScript, then there is a very good chance you've heard of NVM...or Node Version Manager to use it's full name. You will freely be able to use many different versions of Node on your machine and it wont impact your workflow in the slightest. If you have never heard of NVM, then you're either not a frontend JavaScript developer or you've been missing out. However...what if your machine is running Microsoft Windows? The NVM that Mac and Linux users love and use daily, wont work on Windows. End of story. So what do we need?

NVM For Windows

Thankfully, there is a shining light for all developers using Windows. A very thoughtful chap called Corey Butler has built a version of NVM for those of us using Windows machines as part of our development toolset. Thank you Corey for your efforts and for making my life a lot easier!

How To Install NVM on Windows

If you've come this far, this is probably what you're looking for. So without me waffling on any longer, hopefully this will help someone out there.

After starting a new Azure Function, I was met with error messages telling me I had the wrong Node version. This was a new machine, so after checking my version, I actually had none installed.

First of all, we need to grab a release of NVM Windows so we can install it. To do that, head to here, which is Corey's GitHub releases page to get the latest version, and download 'nvm-setup.zip'. After extracting the contents, you'll have this little beauty all ready to be run:

Double-click it to start the install process and follow the instructions...

Once installed, open a terminal and at the prompt type:

nvm

If the installation completed successfully, you'll see something very similar to this:

Success! It's all looking very nice indeed. Now we have the version manager, we need to actually install Node. So with our terminal still open, we can grab the current 'Long Term Support' version by entering:

nvm install lts

This will download, extract and install the 'LTS' version of Node and will even inform you of what to enter to use the newly installed version:

Now when I go back to my terminal from earlier, I list my versions of node installed, enter which version to switch to and verify just to make sure:

I need a different version of Node

So what happens when you get to work on another project and lets pretend it's a legacy project from a few years back. You clone the latest code from your repository and a previous developer has kindly stated in the ReadMe file that you need Node version 12.13.1 to be able to serve the application. Now you have NVM Windows installed, this is nice and easy using 'nvm install' and 'nvm use':

nvm install 12.13.1
nvm use 12.13.1

Note that you need to have the exact Node version number or it will fail.

Now to verify, enter this in to the terminal:

node -v

...and you'll see that you're now using Node version 12.13.1. If you need to see all the versions you have installed for when you need to switch again, just enter:

nvm list

...and you have everything you need ready to switch to the correct version.

Thank You Corey

Just to re-iterate what I said above, we need to thank Corey Butler for his excellent work and effort on building this for us Windows users. No longer can the developers on Mac and Linux look down their noses and scoff at us for not being able to manage our Node versions with ease like they can. Now they'll have to find something else to scoff at!

Microsoft WebView2 blank or not working?

Michael Wilkinson — Sun, 19 Dec 2021 15:01:34 +0000

WebView2? What is that?

Microsoft announced a new control called 'Microsoft Edge WebView2' on October 19th 2020 (official article here) to allow a developer to display content from the web in their native Windows desktop application and to create entire desktop applications built with web technologies.

This new embedded web control is built on top of Microsoft Edge, the newer Chromium edition. When this was announced, there were many comments about how this could cause a dent in the Electron market, particularly for products that only target Windows at the moment. With multi-platform developer goodies from Microsoft (.NET MAUI) on the way, whose to say this wont make Electron sit up and notice.

Currently, if you're building Windows apps with Win32, WPF, WinForms, WinUI 2 or WinUI 3, then you can use this control in your nice new desktop app, or even add it to an existing one as a nice feature addition.

It's not working!

So, after the initial excitement of using this nice new control and see web content in your desktop app in all it's glory, suddenly you notice something a little strange in it's behaviour. Out of seemingly nowhere, it stops working. Your lovely content from the web is suddenly replaced with a blank void. Is it something you've changed? Has your code stopped it from working? Is the web content running some nasty script causing it to stop working? Well, possibly. There is however another reason and it might not be your fault at all.

After working with this control in an evaluation WinUI 3 app, I started to experience the sudden blank content. After a lot of head scratching and debugging, I just couldn't work out what the problem was. So I did the sensible thing and walked away from it with the plan to come back to it the following day. That day came...and it all worked perfectly. Although happy, this made me even more suspicious. This just doesn't happen in software development as we all know! Later that day, it stopped working again. I decided to close all other applications I had open to give it my full attention and it started working again! I haven't got much hair to pull out and my receding locks were starting to look worried.

Bring out the GIMP

I'm not talking about Pulp Fiction here, I am of course talking about the excellent GNU Image Manipulation Program (gimp.org).

Wilber is looking very happy right there, but it seems that when GIMP is loaded, it's stopping the WebView2 control from working properly.

The Proof

I downloaded the WinUI 3 Controls Gallery from Microsoft that is a really nice little app that shows off the WinUI 3 controls all in one place.

From the Media dropdown menu item, you can select a WebView2 page that displays an example of the control performing in all its glory:

However, after loading GIMP this is what happens to the WebView2 control:

The control will no longer display any web content at all and remains blank apart from the 'WebView2 is powered by the Chromium engine' text you can see at the top of the controls viewport. On some occasions when opening the gallery app, it crashes instantly and then closes if GIMP is already loaded. This behaviour however is not consistent.

So what's the fix?

Unfortunately, at the time of writing this there is no fix. The only consistency with it, is the control stops working no matter if you're running the app in debug mode from Visual Studio or from a compiled production version of your app. In a nutshell, it stops working everywhere. There is an open issue on GitHub that I have added my feedback to that suggests the same behaviour occurs with Inkscape as well.

Should I be using this then?

Well that's the big question. If you're creating an app to be used in your company where you can be sure GIMP or Inkscape or not being used, then there is no reason not to use it. For an app that will be on general release is a higher risk as you'll have no idea what your users will be running. I would never say you shouldn't be using it, but if the risks are too high, then I would personally wait for a fix to come along.

All this of course means that Electron is still the King when it comes to producing desktop applications created with web technologies and will be for a while I believe. WinUI 3 from Microsoft does look really nice and will definitely be used heavily in companies in the real World, but possible with the WebView2 control being avoided for a wee while...