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

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 bootstrap@v4.0.0

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.