When we develop applications, we add references to many frameworks and libraries as dependencies. In Visual Studio, we have the NuGet package manager tool to manage all those packages in our application.

In the frontend web community, using Bower, Grunt, Gulp, and NPM to manage packages and running build tasks to develop modern web applications has become widely popular. As this ecosystem is very rich and widely accepted, Visual Studio 2015 has adopted these systems to manage client-side frameworks and libraries, as illustrated. NuGet is ideal to manage server-side packages:

We saw how to manage client-side packages using NPM in Visual Studio Code. Similarly, we use NPM in Visual Studio 2015 or later to manage frontend frameworks and libraries in our project. Let's add the Angular framework and other required JavaScript libraries as dependencies to our project using NPM by following these steps:

1. First, let's add NPM Configuration File to our project. Right-click on the project node and navigate to Add | New Item. Select General under Web from the left-hand side pane and NPM Configuration File from the middle pane.

    

Then, click on Add, leaving the default name as package.json:

The package.json file will be added to your project with the following default JSON code:

2. Update the name field with my-todo and add the required dependencies to the package.json file, as shown:

        "version": "1.0.0",   
        "name": "my-todo",   
        "private": true,   
        "dependencies":
        {   
          "@angular/common": "~4.0.0",   
          "@angular/compiler": "~4.0.0",   
          "@angular/core": "~4.0.0",   
          "@angular/forms": "~4.0.0",   
          "@angular/platform-browser": "~4.0.0",   
          "@angular/platform-browser-dynamic":   "~4.0.0",   
   
          "systemjs": "0.19.40",   
          "core-js": "^2.4.1",   
          "rxjs": "5.0.1",   
          "zone.js": "^0.8.4"   
        },   
          "devDependencies": 
        {   
          "@types/node": "^6.0.46",   
          "typescript": "~2.1.0"   
        }   
      }   

3. The moment we save package.json with all the dependency information, Visual Studio adds the required packages to our project under the node_modules hidden folder, and you can see the list of loaded dependencies by navigating to the npm folder under the Dependencies node, as illustrated in the following screenshot:

We have all the client-side frameworks and libraries in our project dependency node that we need. However, we need to add the dependent libraries to our wwwroot folder for our application to refer and consume. We will discuss this in the next section.