Node.js Package Manager VS2017

In this post, we are going to explore how to manage front-end dependencies with NodeJS sample web applications using Visual Studio 2017.

Topics

  1. Install NPM Task Runner for VS 2015/2017
  2. Install Bower - Manage front-end dependencies
  3. Install Gulp - Front-end build tools

In our previous post, we have learned how to start with NodeJS. Get the review once again by following the link below.

We can start with a new sample node.js application to follow the instructions, in this case, I have started with the previous sample app.

NPM Task Runner

Go to Visual Studio Marketplace for NPM Task Runner extension download it. Visual Studio then opens the file with .vsix type to install NPM Task Runner.

After successful installation open VS2017, then from top menu go to> View > Other Windows > Task Runner Explorer

NodeJS

This will open below the window.

NodeJS

Install Bower & Gulp

Next, we are going to install both, and we need to add new dependencies in package.json

"bower": "^1.8.2",

"gulp": "^3.9.1"

Finally Package.json

  1. {  
  2.   "name""startup-nodejs",  
  3.   "version""0.0.0",  
  4.   "description""StartupNodejs",  
  5.   "main""server.js",  
  6.   "author": {  
  7.     "name""Shashangka"  
  8.   },  
  9.   "dependencies": {  
  10.     "express""^4.16.2",  
  11.     "bower""^1.8.2",  
  12.     "gulp""^3.9.1"  
  13.   }  
  14. }  

Now update NPM packages.

NodeJS

We can also install packages using Command prompt by right click on the project.

For Bower

'npm install bower --save'

For Gulp

'npm install gulp --save'

As we can see from the below image the packages are listed.

NodeJS

Now, right click on the project to open a command prompt to initialize Bower. In command prompt write command ‘bower init’, after configuration process it’ll generate a sample code snippet for bower.json file.

bower.json

  1. {  
  2.   "name""startupnode",  
  3.   "description""startup node",  
  4.   "main""appserver.js",  
  5.   "authors": [  
  6.     "shashangka"  
  7.   ],  
  8.   "license""MIT",  
  9.   "private"true,  
  10.   "ignore": [  
  11.     "**/.*",  
  12.     "node_modules",  
  13.     "bower_components",  
  14.     "test",  
  15.     "tests"  
  16.   ]  
  17. }  

We will add some dependencies in bower.json file

  1. "dependencies": {  
  2.     "bootstrap""^4.0.0",  
  3.     "jquery""^3.3.1",  
  4.     "angularjs""^1.6.9",  
  5.     "modernizer""^2.8.2"  
  6.   }   

Finally, build the application to restore the dependencies to our solution like below. Click on, show all file to view bower component folder.

NodeJS

Now, add a js file by naming it ‘gulpfile’, to copy the required component to the public folder which we are going to reference in our layout page. Open the file copy paste below code snippet.

  1. "use strict";  
  2. var gulp = require("gulp");  
  3.   
  4. var paths = {  
  5.     webroot: "./public/"  
  6. };  
  7. gulp.task('copy-css'function () {  
  8.     gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css')  
  9.         .pipe(gulp.dest(paths.webroot + '/stylesheets/'));  
  10. });  
  11. gulp.task('copy-js'function () {  
  12.     gulp.src('./bower_components/jquery/dist/jquery.min.js')  
  13.         .pipe(gulp.dest(paths.webroot + '/javascripts/'));  
  14.     gulp.src('./bower_components/angularjs/angular.min.js')  
  15.         .pipe(gulp.dest(paths.webroot + '/javascripts/'));  
  16. });  
  17. gulp.task('build'function() {  
  18.   
  19. });  

Once again let’s go to> View > Other Windows > Task Runner Explorer click on the refresh button to see the listed task to run.

NodeJS

Right-click on a task then click Run,

NodeJS

This will copy our library files to desired application location to reference it in our layout page like below screenshot.

NodeJS

Finally here's another thing to modify in our node server to serving static files.

  1. app.use(express.static(path.join(__dirname, 'public')));

 

Use express.static middleware function to serve static files like images, CSS, & JavaScript files

Let’s add an Angular attribute in body tag ‘body ng-app’, then add ‘ng-model’ to join string using an Angular expression.

  • First Name: <input type="text" ng-model="fname" /><br />
  • Last Name: <input type="text" ng-model="lname" /><br />
  • Result: {{fname+' '+lname}}

 

OutPut

NodeJS

Source Code

I’ve uploaded the full source code to download/clone @github, Hope this will help 🙂


Similar Articles