Moving away from Bower (discontinued) to use Yarn/Npm instead (.Net Core MVC) VS2017

Question

I started working on a .Net Core application around 1 year ago. I used .Net Core to set up my project in visual studio and used Bower to manage my client side packages. It seems bower is being maintained/discontinued and the "people in charge" suggest using yarn or webpack instead.

So my question is how do I start using yarn instead of bower? (or npm if that is more appropriate)

When I started my project I used bower from within the Visual Studio package manager by simply by typing:

bower install <package-name>

And it managed to install the files/directories within my wwwroot/lib/ folder. I just had to add the dependency to my _Layout.cshtml and everything worked flawlessly.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
    asp-fallback-test="window.jQuery">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>

I find it quite hard to figure out how to use yarn or npm to achieve the same "easyness" within Visual Studio 2017. I already have access to minifying files through the BundlerMinifier.Core NuGet package, and I believe it does it automatically for files within my , so that is not a requirement for the solution I want to use.

I have tried googling, but it seems this is not a very common problem. And all the links I found suggested using npm and set up gulp for moving files to wwwroot/lib/ and I tried that but I am getting some weird errors in doing so.

How can I use yarn to install packages with similar as I did with bower? or should I use npm instead?

Answer 1

I had the same question as you and found out that Yarn is not too hard to use. Here I discuss installation of Yarn, tweaks to Visual Studio 17, and project workflow.

Yarn Installation

To run Yarn, you need to install two things:

• The prequisite, Node.js.
• The Yarn command line utility.

Disable NPM in Visual Studio 2017

Yarn uses a file in your project, package.json, to keep track of what it has installed. NPM also uses the same file. To avoid any conflicts I have disabled the NPM hooks in Visual Studio. If enabled, these hooks will cause NPM to load packages whenever package.json changes.

To disable NPM go to the Tools menu and select Options.... In the tree on the left, go to: Projects and Solutions -> Web Package Management -> Package Restore. On the right side disable the NPM hooks by changing both options to False:

In the image above I have also disabled the hooks for Bower. This is optional - I did it so as to not accidentally have Bower install any packages.

Project Setup for Yarn

To use Yarn with your project you need to do a couple of things:

• Make sure the project has a package.json file. It should be located underneath the project directory. Initially the contents of the file should contain an open bracket and close bracket:

 

{
}

• Make sure there is a lib directory under wwwroot.

The following directory structure shows an example project with these two things:

+ Solution
    + Project
        + wwwroot
            + lib
        + Program.cs
        + Startup.cs
        + package.json

Yarn Usage/ Project Workflow

Here is the part you have been waiting for. First open the package manager console. The console is just a powershell console within VS. When open you will be in the solution directory, so you will need to CD into the project directory. After that you can add libraries using Yarn:

cd [project dir]
yarn add --modules-folder=wwwroot\lib jquery
yarn add --modules-folder=wwwroot\lib [email protected]

Packages are now installed under wwwroot\lib, because that is where you are telling Yarn to install them.

Adding a Yarn Shortcut in Visual Studio 2017

If you think that the prior section involved too much typing, you can simplify things by adding a shortcut in VS. When this is set up Yarn will automatically run from the project directory, specifying the target folder. All you have to do is tell it what package to install.

Inside Visual Studio, click on the Tools > External Tools... from the menu. In the popup, click the Add button and fill out the fields as follows:

• Title: Yarn Add
  
• Command (your dir may be different): C:\Program Files (x86)\Yarn\bin\yarn.cmd
  
• Arguments: add --modules-folder=wwwroot\lib
  
• Initial directory: $(ProjectDir)

Also enable these checkboxes:

• Use Output Window
• Prompt for arguments

Click the OK button to save the shortcut.

So now you should have a Yarn Add item under the Tools menu. Click on it and you will get a popup asking for input arguments:

All you have to do is click on the first edit box and add your package. For example, to add jquery:

Click OK on the popup and Yarn should work its magic and install your package.

Other Considerations

• I don't do Node development, so I have not considered how the above would impact it. For those who do Node development, something to try would be to use Yarn to install packages into the node_npm folder and see if things work.
• I suspect that currently there are packages that Bower can install that Yarn cannot. Hopefully over time, this gap narrows.