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!