Migrating away from Bower to Yarn in ASP.NET Core front-end applications

Posted: (EET/GMT+2)

 

At this writing, the Bower front-end build tool is being deprecated. Most new ASP.NET Core front-end setups should use npm or Yarn instead. If you still have a bower.json in your project, it is a good time to migrate.

First, add a package.json to your project root and list your front-end dependencies there:

{
  "name": "my-aspnetcore-app",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.1.0",
    "jquery": "^3.3.1"
  },
  "scripts": {
    "install-client": "yarn install",
    "build-client": "webpack --config webpack.config.js"
  }
}

Install Yarn if you have not already, then run:

yarn install

This restores packages into the node_modules folder. From there, you can:

  • Use Webpack or Gulp to bundle and minify scripts and styles.
  • Reference bundled files from your _Layout.cshtml.
  • Wire Yarn commands as pre-build steps in .csproj if needed.

Once your bundles are coming from Yarn/npm, you can safely remove bower.json and the bower_components folder. Your front-end pipeline is now on the same tooling as the rest of the JavaScript ecosystem.

Hope this helps!