Tech Junkie Blog - Real World Tutorials, Happy Coding!: Hour 6: ASP.NET Core : Add jQuery, Bootstrap, Using bower.json

Tuesday, July 30, 2019

Hour 6: ASP.NET Core : Add jQuery, Bootstrap, Using bower.json

In this blog post we are going to add the jQuery, and bootstrap libraries to our ASP.NET Core application.  Normally we will use NuGet to bring in these libraries but ASP.NET Core gives you the option to use bower.json file to configure the dependencies that you will need on the client-side using NPM in the backend.

Here are the steps to import the client-side dependencies into our project:

1. First let's add bower.json file of the "NorthwindCafe.Web" project, Right-click on the NorthwindCafe.Web project and add a file called bower.json in the project

2.  Open the bower.json file the markup should look like this

{
 "name": "asp.net",
 "private": true,
 "dependencies": {
 }
}



3. Change the markup to look like the following
{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "^4.3.1",
    "Jquery": "^3.4.1"
  }
}

5.  Now we want to specify the location of where we want the bower components are installed in our application.  For that we want to create the .bowerrc file .  the only variable we want to set in the file "directory" file, which specifies where we want the bower components to be install.  Let's install the bower components in the "wwwroot/lib" folder. So in the .bowerrc file type in the following


{
  "directory": "wwwroot/lib"
}

5. Save the bower.json file, once the file is saved a folder called "lib" will be created and will contain the bootstrap  libraries.  If bower does not run, you can also go into the project folder in command prompt and run the command bower install


github Repository: https://github.com/techjunkiejh/NorthwindCafe/tree/Hour6

No comments:

Post a Comment

Search This Blog