As you may have read Bower is no longer being actively supported and developed. This is somewhat unfortunate for Visual Studio as there was an obvious push from them to move toward using Bower for front-end package management in Visual Studio 2015.
So where to now?
Well, Bower themselves are recommending Yarn for any new front-end projects you might have. There are some other alternatives such as using NPM. A good reason for favouring Yarn over NPM is Yarn has consistently faster package install times. Some reasons to go with NPM would be that Yarn is built on top of NPM so many would see it as an unnecessary abstraction, and with NPM making improvements all the time it would be worth looking into whether Yarn actually adds value at whatever time you are reading this.
As Bower is also built on top of NPM I found switching over from Bower to Yarn pretty seamless.
Installing Yarn
Installation is pretty straight forward, instructions can be found here. I recommend using Chocolatey as it will install NodeJS for you before installing Yarn.
NodeJS?
As a .NET developer and someone who does most of their development in Visual Studio it took me a while to get my head around why I would need to install NodeJS to run Yarn. My limited understanding at the time was that NodeJS was a JavaScript runtime (i.e. light web server) that enabled me to build and run web applications that had JavaScript on the server-side. So with that in mind I couldn’t quite get why I needed Node just to run package managers like Bower and Yarn!
The key here really, as mentioned earlier, is that both Bower and Yarn run on top of NPM (Node Package Manager) and NPM is built into and relies upon NodeJS in order to run. So yes, while it is true that NodeJS is best known as a server-side JavaScript runtime for web applications it is also a runtime for NPM.
In Visual Studio 2017
As of yet, Yarn has no proper support within Visual Studio 2017, in that no Yarn file types are available in the “Add New Item…” menu. That being said the main Yarn file you will create is a “package.json”, the same as NPM, which you will find in the “Add New Item…” menu under “npm config file”.
In order to test out if Yarn is working:
- right click on your project in the solution explorer
- scroll down and choose “Open command line”
- click on “Default (cmd)”
- or simply click Alt + Space
- In the cmd type “Yarn add normalize”
- I am adding normalize here but feel free to add whatever package you like
- you should see the reference added to package.json as well as a yarn.lock file being generated
Moving your Yarn packages from node_modules to a custom folder
Personally I like to put my 3rd party packages into a folder called “vendor”. I dont like to use the default “node_modules” folder. This was achieved in Bower by adding a .bowerrc file and adding the file path in there. Yarn offers a similar solution. Simply add a .yarnrc file to your project and add a file path like so:
--modules-folder vendor
A Big Yarn-related Bug in Visual Studio 2017
While I found this renaming works I have noticed some strange behaviour in VS 2017. Yes my packages are being installed correctly in a “vendor” folder, however, a “node_modules” folder still gets created, sometimes it is empty while other times it also contains a copy of the packages that are inside of “vendor”.
As far as I can see there is something funny happening inside VS 2017 where it thinks I am using NPM and not Yarn, so essentially ignores the yarnrc file. My suspicions of this were confirmed when Visual Studio recently auto created a “package-lock.json” file in my project – this is the lock file associated with NPM, while “yarn.lock” is the Yarn lock file which I already had. I guess this comes down to the fact that the Yarn package file and NPM package file have same name, “package.json” and Visual Studio is trying to help me out but is getting confused?
How to Fix:
NPM Restore is built into VS 2017 so whenever you save or open up a project in VS it will see you have a package.json file and then run NPM restore causing the issue we see above. In order to get it to work properly you need to disable this restore from taking place, go to:
- Tools -> Options -> Projects & Solutions -> Web Package Management -> Package Restore
- Set to ‘False’ both NPM options
You should then also install the “Yarn Installer” Extension which has one function – to run “Yarn Install” command when the package.json file is saved – Essentially replaces the NPM Restore with a Yarn Restore.