Moving away from Bower (discontinued) to use Yarn/

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

Yarn and npm are very much the same thing. You can use either yarn or npm to achieve the exact same goal, installing node packages. This is similar to what bower did for you previously, except that bower added them to your project web assets instead of node_modules.

WebPack is a tool purely for building client side web assets and bundle them with the dependancies.

If you do not have a need for this, continue to use bower or Nuget for legacy projects. For new projects, use WebPack and yarn/npm.

Answer 2

In my opinion an easier option is using yarn and specify what folder to install packages into using a rc file. Here's how you do it:
1) download yarn onto your computer from yarn's site, you will need to make sure it is included in the Path for your computer if using Windows.
2) create a package.json or type "yarn init" at the root of your project through the command line (if you type "yarn init" it will ask for a few pieces of information to help format the package.json file). Notice the engines section of the package.json file specifying what yarn engine:

{
    "version": "1.0.0",
    "dependencies": {
    "bootstrap": "4.1.3",
    "popper.js": "1.14.3",    
},
    "engines": {
    "yarn": ">= 1.0.0"
    }
}

Then create a .yarnrc file by adding a new text file inside of visual studio to the project, the full name of the file should be ".yarnrc" no .txt after, the project will automatically add the .yarnrc file below the package.json, then add the following to the rc file:

--modules-folder wwwroot/lib

No quotes needed.

Then simply open the command line in the projects root folder and type "yarn" and all the packages will be installed into the folder specified in the .yarnrc file.

Answer 3

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.