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.

• How To Start With Node.js

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

This will open below the window.

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

{
  "name": "startup-nodejs",
  "version": "0.0.0",
  "description": "StartupNodejs",
  "main": "server.js",
  "author": {
    "name": "Shashangka"
  },
  "dependencies": {
    "express": "^4.16.2",
    "bower": "^1.8.2",
    "gulp": "^3.9.1"
  }
}

Now update NPM packages.

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.

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

{
  "name": "startupnode",
  "description": "startup node",
  "main": "appserver.js",
  "authors": [
    "shashangka"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

We will add some dependencies in bower.json file

"dependencies": {
    "bootstrap": "^4.0.0",
    "jquery": "^3.3.1",
    "angularjs": "^1.6.9",
    "modernizer": "^2.8.2"
  }

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

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.

"use strict";
var gulp = require("gulp");

var paths = {
    webroot: "./public/"
};
gulp.task('copy-css', function () {
    gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css')
        .pipe(gulp.dest(paths.webroot + '/stylesheets/'));
});
gulp.task('copy-js', function () {
    gulp.src('./bower_components/jquery/dist/jquery.min.js')
        .pipe(gulp.dest(paths.webroot + '/javascripts/'));
    gulp.src('./bower_components/angularjs/angular.min.js')
        .pipe(gulp.dest(paths.webroot + '/javascripts/'));
});
gulp.task('build', function() {

});

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

Right-click on a task then click Run,

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

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

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

Source Code

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