In this post we are going to explore how to manage front-end dependencies with NodeJS sample web application 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 learnt how to start with NodeJS. Get review once again by following the link : https://shashangka.com/2018/01/20/startup-nodejs/

You can start with a new sample nodejs application to follow the instruction, in this case I have started with previous sample app.

NPM Task Runner

Go to Visual Studio Marketplace for download it. Close visual studio then open 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 window.

Install Bower & Gulp

Next we are going to install both, 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 project.

For Bower:

'npm install bower --save'

For Gulp:

'npm install gulp --save'

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

Now right click on project to open 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 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 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 another thing to modify in our node server to serving static files.

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

Here express.static middleware function to serve static files like images, css, & JavaScript files.

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

First Name: 

Last Name: 

Result: {{fname+' '+lname}} 

OutPut:

Source Code: I’ve uploaded the full source code to download/clone , Hope this will help 🙂