Scott Hanselman

Control how your bower packages are installed with a gulpfile in ASP.NET 5

October 16, '15 Comments [28] Posted in ASP.NET | Javascript | Open Source
Sponsored By

ASP.NET 5 beta 8 is out. Yes, that's a lot of betas, but it's important to get things right when you're doing something new like this. You can find instructions in our documentation for installing ASP.NET 5 beta8 on Windows, Mac and Linux.

ASP.NET 5 uses the NuGet package manager to get server-side libraries but for client-side things we recommend folks use Bower. The most popular JavaScript and CSS libraries are there, and there's no need for us to duplicate them in NuGet. This means ASP.NET 5 folks get to use the same great client-side libraries that other open web technologies enjoy.

In very early builds of ASP.NET 5 we put those libraries in a folder outside the web root (wwwroot) into bower_components or npm_components and then used a gulp/grunt (think MSBuild for JavaScript) task to copy the files you want to deploy into wwwroot in preparation for deployment. However this confused a LOT of folks who weren't familiar with these tools. It also meant another step after installing a new JavaScript library. For example, you'd install angular with bower, then manually edit the gulp file to copy the .js you wanted into the folder of your choice, then run gulp to actually move it. These are common tasks for many of today's open web developers, but have been confusing for ASP.NET 5 users who don't usually work on the command line. So, this was changed a while back and your bower libraries show up right in your wwwroot.

bower stuff under wwwroot

While this is convenient change and great to starters, at some point you'll want to graduate to a more formal process and want to move your bower client libraries back out, and then setup a task to move in just a files you want. Let's take a moment and switch it back the way it was.

Here's how.

Update your .bowerrc and project.json

In the root of your project is a .bowerrc file. It looks like this:

"directory": "wwwroot/lib"

Change it to something like this, and delete your actual wwwroot/lib folder.

"directory": "bower_components"

Exclude your source bower folder from your project.json

You'll also want to go into your project.json file for ASP.NET 5 and make sure that your source bower_components folder is excluded from the project and any packing and publishing process.

"exclude": [

Update your gulpfile.js

In your gulpfile, make sure that path is present in paths. There are totally other ways to do this, including having gulp install bower and figure out the path. It's up to you how sophisticated you want your gulpfile to get as long as the result is that production ready .js ends up in your wwwroot ready to be served to the customer. Also include a lib or destination for where your resulting JavaScript gets copied. Could be scripts, could be js, could be lib as in my case.

var paths = {
webroot: "./" + project.webroot + "/",
bower: "./bower_components/",
lib: "./" + project.webroot + "/lib/"

Add a copy task to your Gulpfile

Now open your Gulpfile and note all the tasks. You're going to add a copy task to copy in just the files you want for deployment with your web app.

Here is an example copy task:

gulp.task("copy", ["clean"], function () {
var bower = {
"bootstrap": "bootstrap/dist/**/*.{js,map,css,ttf,svg,woff,eot}",
"bootstrap-touch-carousel": "bootstrap-touch-carousel/dist/**/*.{js,css}",
"hammer.js": "hammer.js/hammer*.{js,map}",
"jquery": "jquery/jquery*.{js,map}",
"jquery-validation": "jquery-validation/jquery.validate.js",
"jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"

for (var destinationDir in bower) {
gulp.src(paths.bower + bower[destinationDir])
.pipe(gulp.dest(paths.lib + destinationDir));

Do note this is a very simple and very explicit copy tasks. Others might just copy more or less, or even use a globbing wildcard. It's up to you. The point is, if you don't like a behavior in ASP.NET 5 or in the general build flow of your web application you have more power than ever before.

Right click the Bower node in the Solution Explorer and "Restore Packages." You can also do this in the command line or just let it happen at build time.


Looking in this simplified screenshot, you can see the bower dependencies that come down into the ~/bower_components folder. Just the parts I want are moved into the ~/wwwroot/lib/** folder when the gulpfile runs the copy task.

A new flow for my JavaScript

Feel free to share in the comments links to your blog posts on how YOU like your gulpfiles and build process to work!

Sponsor: Thanks to Infragistics for sponsoring the feed this week! Responsive web design on any browser, any platform and any device with Infragistics jQuery/HTML5 Controls.  Get super-charged performance with the world’s fastest HTML5 Grid - Download for free now!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Easy accelerated 3D Games in a browser with JavaScript and WebGL using Three.js or Babylon.js

June 11, '14 Comments [12] Posted in Gaming | Javascript | Open Source
Sponsored By

Let's ignore that we haven't got a web-agreed-upon way to do just about anything, much less basic line-of-business apps with data-bound text boxes over data, and just revel in the fact that we can do hardware-accelerated 3D graphics in our browsers with WebGL. This works today in all the latest browsers.

I noticed this fantastic mini-game promoting Assassin's Creed over at that uses WebGL via a library called Babylon.js. On my Windows machine it runs perfectly in IE11, Chrome 37, or Firefox 30. (Yes, in retrospec, the version numbering for browsers is getting out of hand.)

Some folks on Macs have reported issues with WebGL. Check out for YOUR browser's capabilities.

This Pirate Ship game is really worth checking out and it's fun for the kids. You can also check out the Developer Teardown and learn how they built it.

3D Assassin's Creed Pirates in my browser

I wanted to get a better understanding of exactly how difficult it is (or easy!) to get in to WebGL in the browser. I found this article over at SitePoint by Joe Hewitson and started with some of his sample code where he compares two popular WebGL libraryes, three.js and babylon.js. The Assassin's Creed game here is written using Babylon.js.

Three.js seem to be  a general layer on top of WebJS, aiming to make scene creation and animation easy. Using Joe's sample (that I changed a little) along with a texture.gif, I was able to make this spinning 3D cube easily.

There's a live example running at you can see in your modern browser. Below is just a static image.

I would have animated it but that would have been a meg. ;)

Three.js is on the left and Babylon.js is on the right. It doesn't really matter given the static image, but one think you'll notice immediately if you run the live sample is that you can zoom in and out, pan, grab, and manipulate the babylon.js cube. I could have hooked up some events to the three.js cube, or perhaps added a physics engine like Physijs and made it interact with the world, I suppose. It struck me though, that this little example shows the difference in philosophy between the two. Babylon seems to be more of a game engine or a library that wants to help you make games so there's interactions, collision detection, and lighting included.

Three.js supports many renderers, cameras, and lighting. You can use all WebGL capabilities such as lens flares. It supports all the usual objects and geometries as well. Their examples are extensive with over 150 coding examples covering everything you'd want to know from fonts, models, textures, to sounds. There's even an in-browser Three.js editor.

Babylon includes a lot including a physics engine from cannon.js built in, full scene graph, offline mode, textures, special effects and post processes, many cameras including Oculus Rift (!) lots of meshes. Babylon.js even supports standard Gamepads via like the Xbox One controller natively via the Gamepad API spec.

Anyway, here is the cube on the right from Joe's code that I modified slightly, using babylon.js:

// Babylon.js 
var canvas = document.getElementById('babylonCanvas');
var engine = new BABYLON.Engine(canvas, true);
var sceneB = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), sceneB);

var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -1, 0), sceneB);
//light.diffuse = new BABYLON.Color3(1, 0, 0);
//light.specular = new BABYLON.Color3(1, 1, 1);

var box = BABYLON.Mesh.CreateBox("box", 3.0, sceneB);
var material = new BABYLON.StandardMaterial("texture", sceneB);
box.material = material;
material.diffuseTexture = new BABYLON.Texture("texture.gif", sceneB);


engine.runRenderLoop(function () {
box.rotation.x += 0.005;
box.rotation.y += 0.01;

I also commented out the lighting but you can see how easy it is to add lighting to a scene if you like. In this case there was a diffuse red light along with a specular white.

With babylon.js I could change the size of the scene by changing the size of the canvas. With three.js the width and height are pulled in programmatically from the enclosing div.

Here is the near-same box created with three.js.

// Three.js 
var div = document.getElementById('three');
var height = div.offsetHeight;
var width = div.offsetWidth;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);

var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 400;

var sceneT = new THREE.Scene();

var cube = new THREE.CubeGeometry(200, 200, 200);

var texture = THREE.ImageUtils.loadTexture('texture.gif');
texture.anisotropy = renderer.getMaxAnisotropy();

var material = new THREE.MeshBasicMaterial({ map: texture });

var mesh = new THREE.Mesh(cube, material);


function animate() {

mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render(sceneT, camera);

Both libraries have amazing Examples Galleries and you should check them out.

Also note that there's a contest running until June 20th, 2014 over at where you'll create your own shader within the browser and submit it for judging. Contestants must be over 16 years of age and from one of the following countries: United States of America, United Kingdom, France, Germany, Spain, or Australia. The contest starts here and the grand prize is an Assassin’s Creed Collector’s Black Chest Edition and an Xbox One.

Create your Shaders in the browser

Even if you don't win, do check out the in-browser shader editor. It's amazing.

Sponsor: A big welcome to my friends at Octopus Deploy. They are sponsoring the blog feed this week. Using NuGet and powerful conventions, Octopus Deploy makes it easy to automate releases of ASP.NET applications and Windows Services. Say goodbye to remote desktop and start automating today!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Recent JavaScript Jabber Podcast - Microsoft, not Microsoft, and the Web

August 20, '13 Comments [41] Posted in Javascript | Podcast
Sponsored By

loraxI was a guest recently on a podcast called JavaScript Jabber. I enjoy checking out other folks' podcasts and how they run things. I actually talked to the guys about sound quality for about 30 min before the actual recording started.

Their show is about JavaScript exclusively so we spent about an hour talking shop.

Here's a few quotes...yes, I'm quoting myself. On my blog.  We talked about Open Source:

I don’t care if it’s not Entity Framework. If you want to use NHibernate or RavenDB or CouchDB, dude, knock yourself out. But ultimately, the dirty little secret about Microsoft is they want you to run on Windows. Okay, well you don’t run Windows. You guys run Macs. Okay. But maybe you’ll discover that Azure is actually a pretty kickass cloud service and you’ll run your stuff on Azure, which is Windows.

We talked about using the client machine more effectively:

I hear a lot of people say, "Hey, we run a web farm and we’ve got about ten machines in the farm and it just can’t handle the load. We’re going to need to buy an 11th machine." Then you talk to them and they’ll say something like, "Well we’ve got 10,000 people hitting the site," and I’ll think to myself, "Okay, you’ve got 10 machines in the farm and you have 10,000 people hitting the sites. All those people have quad processors, even if they have a phone. Are those processors really working hard? You’ve got 40,000 unused processors just sitting there and they’re waiting for your 10 processors to give them angle brackets. What if you gave them curly braces and let them do the work?”

I think the podcast turned out fairly well, although there was a little tension as I felt I was being asked to make declarative statements and defend historical stuff I didn't work on. I think I made it very clear that my opinions about the industry are just that, opinions, and mine alone. That said, we talked about node, JavaScript in general, the way the industry is moving with respect to where work happens (client vs. server) and a bunch of other things.

They called this episode "JavaScript Strategies at Microsoft with Scott Hanselman." Other than the "with Scott Hanselman" part, this title is problematic.

The hosts are fine folks and I had a pleasant time. I think because of the title of the episode this particular episode has been getting a LOT of Tweets and appeared on Hacker News and Reddit for a short while. I wouldn't have chosen this title, myself.

  • It implies I have anything to do with JavaScript at Microsoft.
    • I don't. I do work in Azure and Web Tools and I often give my opinions on the JavaScript Editor, on what we do with Node, and how frameworks like Ember and Angular will be presented in VS, but I am not in charge of anything. I give feedback just like dozens (hundreds?) of other random folks inside the Big House.
  • It implies I'm some how strategic, strategically involved or know strategery within JavaScript at Microsoft.
    • Again, JavaScript on the client is the Chakra engine and the IE team. I don't work for them, no do I claim (and never have) to speak for them.
  • It implies I'm a spokesman for Microsoft.
    • I'm an enthusiast and a teacher, but not a marketer or spokesman. I speak, and yes, I do have this blog, but it's mine and its writings and opinions are mine. I often write about Microsoft stuff because I work there, but I worked elsewhere for 15 years and blogged that also. I blogged and podcast before I got to Microsoft and I will continue to blog and podcast after I leave. I am not my job.

I would encourage you to check out the podcast episode yourself and see what you think. It also includes a complete transcription, which is a nice touch and very important.

Sponsor: A big thanks, and a welcome to Aspose for sponsoring the feed this week! Check out their Aspose.Total for .NET has all the APIs you need to create, manipulate and convert Microsoft Office documents and a host of other file formats in your applications. Curious? Start a free trial today.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

A rich new JavaScript code editor spreading to several Microsoft web sites

August 1, '13 Comments [33] Posted in Javascript
Sponsored By
Where is this JavaScript-based editable code area coming from?

I noticed yesterday that some C#, JavaScript and CSS files I had sitting in SkyDrive were suddenly editable.

Editable code in SkyDrive

Not just editable, but there's also autocompletion of strings (not quite intellisense, as it's just one file at a time) and token/symbol recognition.

Editable code in SkyDrive

Plus, this editor looked REALLY familiar to me. I started looking.

I looked over at the Windows Azure Portal, where developers can write node.js to make web services directly in the browser. Here we've got dropbox autocomplete, tooltips with syntax errors and even some basic symbolic refactoring!

Azure Mobile Service's rich code editor

Below you can see the editor in Azure Mobile Services throwing a tooltip syntax error. Is this happening on the server?


Then I remember TypeScript's "playground" online that shows how TypeScript turns into JavaScript. This is split-screen with TypeScript on the left and JavaScript on the right.

The TypeScript Playground

Then I went to look at TFS Online's stuff at where I made an account to host private Git repos for side projects.

Inline comments in TFS online

Notice that in TFS Online this editor is used for diffs and comparisons, but also includes inline threaded comments! This is all in JavaScript, people.

The editor in a side by side diff

I brought up F12 tools just to check.

The javaScript editor open in SkyDrive

That's pretty unambiguous. Looking at the CSS by just clicking on editor.main.css. The "vs" in the div's class point to a vs-theme.css that I presume is to set the colors and make the text editor look familiar.


Looking in editor.main.js, it's all minified, but it's cool to see.


This JavaScript code editor/viewer component is on a TFS site, an Azure site and a SkyDrive site, being used very different divisions across Microsoft. Very cool to see code reuse, but also a good experience replicated. Kudos to the SkyDrive team for recognizing a good thing and putting it into production. It'll be interesting to see where else this editor pops up in the future.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

JavaScript is Web Assembly Language and that's OK.

May 24, '13 Comments [48] Posted in Javascript
Sponsored By

Some years ago I said that JavaScript is the Assembly Language of the Web. In fact, lots of people said it, because it's true. Later, some folks disagreed, saying that this is an inaccurate analogy. Of course, it is inaccurate because it's an analogy. That said, as analogies go, it's pretty good. Sure, assemblers are architecture and processor specific. Maybe "JavaScript is the Web's Bytecode" is better. At the very least, JavaScript is a totally reasonable compile target.

Given that (using Wikipedia as a dictionary here and has a decent definition:

An assembly language is a low-level programming language for a computer, or other programmable device, in which there is a very strong correspondence between the language and the architecture's machine code instructions.

It's initially not clear that JavaScript is a good assembly language as it's a high-level programming language that is itself interpreted, then JIT-ted, then turned into machine instructions. Phrased differently, JavaScript floats pretty high in the stack. Certainly every processor has its own assembler and they are very specific, but the browser's JavaScript VM is what runs the "new machine code." There's only one processor architecture. The Web. (again, analogy!)

JavaScript remains a popular transpilation/compilation target. From Google's GWT to Clojure to TypeScript to CoffeeScript, it all stops at JavaScript because JavaScript is the ubiquitous virtual machine that we already have installed on our machines.

Google Native Client (NaCl) is great and will likely have a role to play, but there's only one language that works everywhere without installation or trouble and that's JavaScript.

asm.js compilation & execution pipelineWe don't all have x86 machines. We don't have have machines that we could feed assembler or C. Certainly not in a portable way. JavaScript is the great portable equalizer.

There's languages that transform to JavaScript like TypeScript and CoffeeScript and HAXE and so many more, but many of these are arguably transformations, not compilations. They also tend to compile to lots of different kinds of JavaScript.

Enter asm.js. Why not take the sprawling language that is JavaScript and pick just the subset that one would want if one were to compile something to it? Why not take the assembly-esque parts of JavaScript and formalize it? Mozilla is doing this with the clear goal to compile things to JavaScript and make it perform well. Their FAQ says they're seeing slowdowns around a factor of two, which is amazing, in case you're wondering. It's also worth noting that I, as a user, don't care if you compile your C to JavaScript. I just want a great experience on the open web, and that's another reason that targeting JavaScript moves the web forward.

Working in tandem, there's emscripten, a LLVM bitcode to JavaScript compiler. We can take C/C++ and compile it to JavaScript. Don't buy it? They ported Unreal Engine 3 in 4 days with asm.js as the target.

You can argue that JavaScript isn't the x86 or Assembly of the web. You can argue all you want. It's still happening.

As our great philosopher Kosh from Babylon 5 once said: "The avalanche has already started. It is too late for the pebbles to vote."

The avalanche has already started. It is too late for the pebbles to vote.

It's not clear that JavaScript is the end state. In fact, if anything it's clear there is no end state. But along the way we will - actually are - passing though the JavaScript as Assembler part of the trip.

Sponsor: Big thanks to SoftFluent for sponsoring the feed this week! Less Plumbing, More Productivity! Generate rock-solid foundations for your .NET applications from Visual Studio and focus on what matters!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Page 1 of 21 in the Javascript category Next Page

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.