An ECMAScript 6 Search Box (Part 1)

Over the past week I’ve made decisions about:

You may not agree with all my decisions, bu I’ve laid them out there for you.  Now, how do I integrate all these various tools together so that it works within Visual Studio 2015 and an ASP.NET v5 application?  That’s the point of this next set of posts. At the end I will have a GitHub repository with my minimal application in it for you to enjoy. More importantly, you will get to see all the steps I go through to get there with all the tooling I have chosen.

Getting Started

Let’s start with an ASP.NET v5 Empty project.  I’ve covered this before.  However, here is a refresher.  Start with File -> New Project…


Select the ASP.NET Application template and give it a name (unless you happen to like WebApplication1).  Also make sure you select the other good options here – I’m storing my solution in a GitHub repository.  That means that I am checking the “Add to Source Control…” box and selecting a location within my cloned repository.  (Sorry – I am not covering the mechanics of Github here). Click on Next when you are done.


From here, select the Empty ASP.NET 5 Application – this will give me the most minimal content in your project so I can build everything from the ground up.

ASP.NET Scaffolding

My first step is to get a web service that I can use to serve up my minimal amount of pages. Since most of the work is going to be in the Javascript side, I’m going to set up an ASP.NET application that serves up static pages. You may want to do this if your application is mostly Javascript and all the interaction comes via a RESTful WebAPI. If you want to use a traditional ASP.NET MVC pattern, feel free.

My ASP.NET vNext package manager of choice, like everyone elses, is NuGet. As a result I’ll be adding the ASP.NET packages to my project.json file. Here I am adding the Static Files assemblies plus BrowserLink and error pages to my file:

    "webroot": "wwwroot",
    "version": "1.0.0-*",
    "dependencies": {
        "Microsoft.AspNet.Server.IIS": "1.0.0-beta3",
        "Microsoft.AspNet.StaticFiles": "1.0.0-beta3",
        "Microsoft.AspNet.Diagnostics": "1.0.0-beta3",
        "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-beta3"
    "frameworks": {
        "aspnet50": { },
        "aspnetcore50": { }
    "bundleExclude": [
    "exclude": [

I’ve also got some simple changes to make to the Startup.cs file to enable all this:

using Microsoft.AspNet.Builder;
using Microsoft.Framework.DependencyInjection;
using Microsoft.AspNet.Diagnostics;

namespace BubbleSearch
    public class Startup
        public void ConfigureServices(IServiceCollection services)

        public void Configure(IApplicationBuilder app)

I’ve added a test.html page in the wwwroot directory – this is just to say “the web server is working and serving pages ok”. My HTML page is simple:

<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Test Page</title>

Running the project now should allow you to browse to the test.html page and show off the HTML you placed in there.

Adding Bootstrap and jQuery Libraries

My next work item is to get the Bootstrap and jQuery libraries installed. Initially I am going to place these in the wwwroot/lib directory – that may not last long term, but the idea is that wwwroot can be cleaned out whenever I want. All my source code needs to go through some sort of transformation before it can be run. First stop is to get the packages. My package manager of choice for Javascript is NPM, so I need a package.json file.

Visual Studio has direct support for NPM, so just right click on the project, select Add -> New Item… and select the NPM Configuration File. This will create a template package.json file. The contents of my package.json file a relatively simple at this point:

    "version": "1.0.0",
    "name": "BubbleSearch",
    "private": true,
    "dependencies": {
        "bootstrap": "3.3.2",
        "jquery": "2.1.3"
    "devDependencies": {

Once I saved this file, Visual Studio will automatically download the packages. The packages will be listed under the Dependencies\NPM node. On disk they are located under the node_modules directory.

Initializing the build process

I now need to put the pieces of the two libraries in the right place. For that I want a task runner since this process will be a part of my build. I chose gulp as my task runner, so let’s work on the gulp configuration next.

Gulp doesn’t have an explicit sample so just use Add -> New Item… and add a new Javascript file to the project called Gulpfile.js. It will be blank but notice that Gulp logo is in the bottom right of the file editor (if you have Web Essentials installed). This is a good indication you have the right filename.

To start with, I want two tasks that assist me with building. The idea is that I can run “gulp build” to build the system and “gulp clean” to clean out all the build artifacts. My initial Gulpfile.js looks like this:

var gulp = require('gulp'),
    del = require('del'),
    path = require('path');

var npmPath = './node_modules',
    buildPath = './wwwroot';

gulp.task('libraries:copy', function () {

gulp.task('libraries:clean', function (cb) {
    del([path.join(buildPath, 'lib/**')], cb);

gulp.task('build', [

gulp.task('clean', [

gulp.task('default', ['build']);

The whole point of the del package is to delete paths. In this case I’m deleting the wwwroot/lib path and everything below it in the libraries:clean task.

I also need to add gulp to the devDependencies section of my package.json file. In addition, I need to add the del package to handle the cleanup task. You don’t need to install the path plugin – it’s a part of Node and gulp runs on top of node.

    "devDependencies": {
        "gulp": "3.8.11",
        "del": "1.1.1"

One thing I did notice is that Gulp did not run correctly within Visual Studio the first time. In the Task Runner Explorer, I saw the following error:


To fix this I started a PowerShell task as Administrator and ran the following:

npm install -g gulp

Open the Task Runner Explorer (right click on the Gulpfile.js and select it) and refresh the configuration. You should see something similar to this:


I’ve got several targets here. The default one should run the build target. The build target and the clean target will eventually become lists of pipelines and the libraries:clean and libraries:copy concern themselves with the libraries that I have installed. I still haven’t created a libraries:copy task, so let’s do that now:

var gulp = require('gulp'),
    del = require('del'),
    path = require('path'),
    merge = require('merge-stream');

var npmPath = './node_modules',
    buildPath = './wwwroot';

var libraries = [

gulp.task('libraries:copy', function () {
    var tasks = (library) {
        return gulp.src(path.join(npmPath, library, 'dist/**'))
            .pipe(gulp.dest(path.join(buildPath, 'lib', library)));
    return merge(tasks);

This took a little bit of working out. First of all I’ve added some new modules to my gulp settings – merge-stream needs to be loaded, so place that in the devDependencies of your package.json file. I’ve defined where NPM deposits the libraries, where I want them afterwards and which libraries to include in the process.

I am using the function in the libraries:copy task to iterate over the list of libraries. For each one I am going to utilize a simple copy pipeline to copy the contents of the dist directory to the wwwroot/lib directory. This returns an array. I then use the new merge-stream plugin to merge all these different tasks into one task.

An alternate way to write this would have been as follows:

gulp.task('libraries:install-bootstrap', function() {
gulp.task('libraries:install-jquery;, function() {
gulp.task('libraries:copy', [ 'libraries:install-jquery', 'libraries:install-bootstrap' ]);

Now expand that to 20 libraries. I hate boilerplate code in most cases. By doing this with an extra plugin and an array I just have to add the library to the array and re-build.

If you have done everything properly then you can do two things in the Task Runner Explorer.

  1. Right-click on Build or Default and select Run – the wwwroot\lib directory will be populated with the two libraries.
  2. Right-click on Clean and select Run – the wwwroot\lib directory will be removed.

Once you have built, here is what your wwwroot tree should look like:


I’ve uploaded this code to my GitHub Repository for you to review. Note that it is the complete code, so check out the other articles in the series that cover everything. In the next article I will convert my BubbleSearch code to ECMAScript 6 and integrate the some more of the tool chain.