Visual Studio 2015: npm, Bower and Grunt – Part 1

Few days back Microsoft released Visual Studio 2015 CTP 6, I have been using Visual Studio 2015 since the early previews and when it comes to new changes they brought to Visual Studio and Microsoft ecosystem, it’s mind blowing. It’s really nice to see where the company goes with all the new things.

But this blog post series not about Microsoft change, it’s about three small components they integrated to Visual Studio 2015. These were there in Visual Studio 2013 as well but wasn’t inbuilt. Those are npm, Grunt, and Bower. This blog post is for people who have trouble understanding what these are and would like to use these in Visual Studio 2015. First I’ll give introduction to each component and then I’ll show you how to use it in Visual Studio 2015. This blog post is purely used to describe each component and what are key features in each component. In next blog post, I shall describe how to use each in Visual Studio 2015. If you know what these are, you may skip to next post.

  1. Visual Studio 2015: npm, Bower, and Grunt – Introduction
  2. Visual Studio 2015: npm, Bower, and Grunt – Practical usage

Package Managers

Before I talk about each component, I want to talk little bit about package managers. Think of a scenario where you develop an application which uses external libraries. In early days, what we have done was to go to developer site and download required library and add it to our project as a reference. There are two major questions we face when we download libraries from websites.

  • What about dependencies?
  • What if this packages got updated?

Usually we get all dependencies from developer site, but it really can be a headache to add those to project. And about updates, we usually won’t check developer site for updates if it isn’t absolutely necessary. You may argue that updating the package may break the code, true there’s possibility for that. But what if there’s critical update in the package, may be security related, or change in back-end API which got updated in library, we don’t have any option but to update the package. Issue is, in such scenario we may not know the required change until our application starts to fail.

This is where package manager comes in. We can use the package manager to download and install required library to our project. Package manager will automatically download and install dependencies. When an update comes, the package manager will notify us about the update, if we need, we can update it, if we think it’s not necessary we can ignore it too. But at least we know we ignored it and we know what we are getting into, this is much better than not being aware of it.

One package manager we used since Visual Studio 2010 is NuGet package manager.

npm

npm is a package manager for JavaScript. Note that npm only works for JavaScript libraries, in npm context, we all these libraries as packages. Limitation is we only can use npm to install these predefined packages which supplied by a repository. If we want something other than these packages, we can’t use npm for that task. Now you may ask, what do we need other than these packages, if this is such a sophisticated system, it should have all the libraries we want right? Answer is Yes and No.

Yes, because it has almost every commonly used JavaScript library in it. No, because if we want any other library which have htmlcss or images we can’t use npm for that. To understand the reason for this, we should dig into the concept of npm and understand what’s really behind it.

Even though we only see npm in Visual Studio, it really comes with Node.js. Now you may hear about Node.js, it is a server side JavaScript engine (like Apache, IIS). When we install Node.jsnpm comes as default package manager for Node.js. When it comes to Visual Studio npm integration, we use npm to install developer dependency libraries. For example, we use npm to install both grunt and bower

When we work with npm, understanding package.json is very important. package.json is the file which contains settings for given npm package. In our context, this file contains npm settings for our project.When we use npm with node.js, name and version required and plays a major role, but in our case, even though those are required, it doesn’t matter what the values are. What we have to worry is devDependencies property of the configuration. There are actually two types of dependencies in npm, those are application dependencies (dependencies) and developer dependencies (devDependencies). Difference between these two is, application dependencies will get published to your build output, developer dependencies only work on developer environment, they will not get published to build output.

One special thing to note in npm dependencies is that, we can use nested dependency libraries inside our application. This can cause duplication of libraries inside the application. This can be both advantage and disadvantage given the scenario.

There are few annotations you should know when mentioning version of the package you are going to use. I will describe each annotation below.

Version  Description of version
* any version
“” (empty string) any version
 1.2.5 must match the exact version given
>1.2.5 must be greater than given version
>=1.2.5 must be greater than or equal to given version
<1.2.5 must be lesser than given version
<=1.2.5 must be lesser than or equal to given version
~1.2.5 should approximately equal to given version
^1.2.5 must compatible with given version
1.2.x must be subversion of 1.2 (not 1.3 or 1.4)
1.2.3 – 1.2.7 (range)  must be between given range (>=1.2.3 and <=1.2.7)
range1 || range2 || range3 must satisfy one of range given range
http://…….. url must point to tarball, tarball will be downloaded and installed to project (ex: https://bitsnorbytes.com/packages/abc.tar.gz)
git….. git project will be downloaded and installed to project
ex:
git://github.com/user/project.git#commit-ish
git+ssh://user@hostname:project.git#commit-ish
git+ssh://user@hostname/project.git#commit-ish
git+http://user@hostname/project/blah.git#commit-ish
git+https://user@hostname/project/blah.git#commit-ish
 user\repository download given repository from given user at GitHub
file:….. get package inside give folder. Folder must be either relative to project or absolute path

When we use npm in Visual Studio 2015, ASP.NET 5 projects, we only use devDependencies, there isn’t any restriction not to use dependencies in the project, but we have alternative way to manage application or client dependencies.

You can read more about package.json properties and specifically about dependencies property from below URLs.

Bower

I think you may have idea about what bower is. It’s simply the tool which we use to install any library which going to need to application itself. This is the description given for library in official site.

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.

Unlike npm bower designed to work specifically for client side libraries. Still you don’t feel like it doesn’t justify the reason to use bower instead of all other libraries right? Main reason to use bower to client side libraries is because it doesn’t support nested hierarchy of libraries. It only support flat hierarchy and does not allow duplicates. In other words, you never can add multiple versions of same library for one project.

Same like npm, bower also have a configuration file.

In bower.json file, name is the name of the application. Property private is to inform bower that this application is a private application and not to publish it to bower registry (if application get registered in bower registry, other users can download application using bower). We can list all dependencies in dependencies property. We can use same version annotations as npm inside this to mention version of library. What specific to bower is the property exportsOverride. This property tells bower what kind of files should be downloaded from each package. This gives developer flexibility remove unwanted files from the package before deployment.

Grunt

Grunt is a JavaScript based task runner. We can use task runners to run predefined set of tasks repetitively on a project. A task can be either minifiying JavaScript, CSS files, compiling, unit testing or may be check code for errors (linting). For grunt also we have separate configuration file called Gruntfile. But unlike npm and bower, configuration file for Grunt can be either a JavaScript or CoffeeScript file. In Visual Studio we use gruntfile.js file to configure Grunt.

There are few sections in Gruntfile we need to understand. First part is the wrapper function. This function encapsulates the Grunt configuration.

This function also a comes from node.js, if I quote definition from node.js documentation,

The module.exports object is created by the Module system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired export object to module.exports. Note that assigning the desired object to exports will simply rebind the local exports variable, which is probably not what you want to do.

In simple terms, if we want to expose something inside script file to use outside of file it self, we can use module.export to do that task. You can learn more about functions of module.export from this blog post.

Second part of Gruntfile to understand is the grunt.initConfig section.

As method name says, this initialize the Grunt configuration for each task. For example in here it configures bower task. Now the question you should have is what is a task and how we configure them. When it comes to Grunt a task can be anything. We can create tasks as we desire. In Visual Studio 2015 web project, it only configure the bower task. If you check little bit below, you can see how it create new task.

From this line it says that Grunt should register bower task passing install parameter to it. Basic syntax of registering task is,

You can enter a task name, this is actually a task collection name, whenever you load tasks with this name, Grunt will run all the tasks registered under this name. Task description is optional. When you name a task, you can name parameters of the task using “:” notation. For example, “bower:install”, in here task name is bower and parameter is install.

And final line of Gruntfile,

This allows up to manage bower packages through Grunt, for example, minifying, testing and testing packages through tasks.

This is the end of the introduction to npm, bower, and Grunt. I’ll talk more about how to use these in Visual Studio 2015 in my next post.

ScottGu’s Blog – Introducing ASP.NET 5

ASP.NET 5 is an open source web framework for building modern web applications that can be developed and run on Windows, Linux and the Mac. It includes the MVC 6 framework, which now combines the features of MVC and Web API into a single web programming framework.  ASP.NET 5 will also be the basis for SignalR 3 – enabling you to add real time functionality to cloud connected applications. ASP.NET 5 is built on the .NET Core runtime, but it can also be run on the full .NET Framework for maximum compatibility.

via ScottGu’s Blog – Introducing ASP.NET 5.

Azure Site Extensions

It’s not been a month since I’ve started blogging, and when I had to choose where to host my blog, I thought “Why Not Azure?”, I like Azure and I already have some experience using Azure. So, I created WordPress site on Azure and started blogging.

My first adventure with Azure and my blog was to setup CDN for my blog. I tried few CDN providers but none able to satisfy me, some had too much features which I don’t need, some were too expensive for me. Then I read about Azure CDN, I thought “Why Not Azure CDN?” and here I am, using Azure CDN for my blog. True it’s not featuristic as other CDN providers, true it does not have much control either, but still it works perfectly for my blog and was able to improve speed of my blog. When I compare pricing, it’s much cheaper than any other CDN provider because Azure bill you only for usage.

But today I experienced new thing in Azure. I never new this feature and it is something to be expected from new Microsoft. It all started when I as running around new Azure Portal. it’s been few days since I noticed that all new features to Azure isn’t available on old Azure portal. For example, search preview isn’t there on old Azure portal.

As you can see in my topic, this is about Azure WebSite extensions. It’s not something many people talks about, but I think it’s something every Azure WebSite owner know about. Reason? It give more options and features to site owner which are necessary to control the site. First of all I’ll show you how to see these site extensions.

1. Goto your site on new Azure Portal.

2. Goto Settings of WebSite, there you can see Extensions.

3. There you can see list of extensions, for me I installed, “Site Admin Tools”, “phpmyadmin” and  “phpmanager”

4. After the installation, you can navigate to extension by clicking browse.

Now as you may can see, it does have many powerful tools you may need, phpmyadmin, it’s must when comes to managing MySQL databases, and phpmanager, can be used to import .htaccess files to web.config and there are many other tools you can use to administer your site. There are extensions to get logs of your site, file and image minifiers and many more.

Try and let me know your experience. Have fun with Azure Extensions!! 🙂

Getting started with ASP.NET 5/ vNext and MVC 6

Today I came across with good white paper written by Telerik, it discusses about some of the burning questions we have about ASP.NET 5. For me, it answered lots of questions I had about ASP.NET 5. This is the link for white paper.

After I read this white paper, I thought to compile a list of resources to get insight about ASP.NET 5/vNext and other related technologies like MVC 6.

First of all I’ll share this course from Microsoft Virtual Academy about ASP.NET 5, this is a lengthy course about ASP.NET 5 but it definitely worth the time.

These are some of blog posts I found from various locations.

This is another set of blogs about ASP.NET 5 and MVC 6 by Stephen Walther, since world now move towards client-side MVC frameworks, I think this is good set of tutorials about how to use ASP.NET 5 with AngularJS.

I will update this post time to time with new resource I see. Hope this helps you. 🙂

[Update 2015-02-10]

Good article about debugging ASP.NET Framework libraries using VIsual Studio 2015.

[Update 2015-02-24]

Found new set of blogs by Filip W about few advanced topics on ASP.NET 5 and MVC 6

ASP.NET MVC Controller Vs. Web API – 5 Things You Should Know – BinaryIntellect Knowledge Base

ASP.NET MVC allows you to expose functionality through action methods. One can also expose the functionality as a Web API. Beginners often find it confusing to decide when to go for an MVC controller driven approach and when to go for a Web API. Here are five main considerations that can be helpful while taking a decision.

via BinaryIntellect Knowledge Base | .Net & Web Development – ASP.NET MVC Controller Vs. Web API – 5 Things You Should Know.

One reference architecture in PaaS cloud solution. – Jian Wu’s Blog

It is from projects to demonstrate cloud energy and relieve big headaches in traditional solutions, the architecture can be realized smartly with public cloud while keep connected with local network, and the reference may help in Windows Azure, Amazon Web Service and more cloud platforms.

One reference architecture in PaaS cloud solution. - Jian Wu's Blog. - Site Home - MSDN Blogs

via One reference architecture in PaaS cloud solution. – Jian Wu’s Blog. – Site Home – MSDN Blogs.

Jeff Putz – Repositories gone wild

One of the very beneficial side effects of the rise of MVC in the ASP.NET world is that people started to think a lot more about separating concerns. By association, it brought along more awareness around unit testing, and that was good too. This was also the time that ORM’s started to become a little more popular. The .Net world was getting more sophisticated at various levels of skill. That was a good thing.

via Jeff Putz – Repositories gone wild.

Searching with the Office 365 APIs – Richard diZerega

Today, Microsoft quietly launched the “search” permission scope in Azure AD Applications. This is huge step in delivering new scenarios with the Office 365 APIs that leverage SharePoint search and the Office Graph. In this post, I’ll illustrate how to leverage search with the Office 365 APIs and use it to query site collections and modern groups a user has access to (a difficult/impossible task with the Office 365 APIs until today).

via Searching with the Office 365 APIs – Richard diZerega’s Blog – Site Home – MSDN Blogs.

Run ASP.Net (vNext) Application on Linux with Docker

While surfing MSDN blogs today early morning, I saw this blog post about hosting ASP.Net application in Linux virtual machine in Azure. After I read this great blog post, first thing came to my mind was why don’t I install Linux locally on a VM and try the same scenario. In this blog post I’ll describe step by step installation and configuration of Ubuntu, Docker and run ASP.Net application in it.

Download Ubuntu iso image. Using this image you can create Ubuntu VM either using VMware Player/ Workstation or Hyper-V. In my case I used Hyper-V. It doesn’t matter what hypervisor you use, only woking Ubuntu VM/ machine needed.

You can update your VM to latest version if needed after the installation, since I like to use latest updates, I installed all updates to my VM.

Install Docker on Ubuntu

You can read full article about intalling Docker on Ubuntu from this link. I extracted the necessary information from it and stated it below.

1. Check whether APT can work with https URLs, if not install apt-transport-https.

2. Add Docker repository to your local keychain

3. Update your repository and install Docker

Please go through this tutorial for get more information about installing Docker in Linux.

After finish installing Docker, when you run docker you should get output as below screen.

Untitled

Prepare Docker container

1. I’m going to use vNext ASP.Net project at GitHub.

2. Create Dockerfile and add content specified here.

From above code it does following things.

  • FROM microsoft/aspnet Get the base image for ASP.Net from Microsoft
  • COPY . /app Copy content of current folder (HelloWeb) to /app directory of the container
  • WORKDIR /app This sets current working directory to /app folder
  • RUN ["kpm", "restore"] Download all the dependencies of the application
  • EXPOSE 5004 Informs Docker that the container will listen on the specified ports at runtime. Docker uses this information to interconnect containers using links and to determine which ports to expose to the host.
  • ENTRYPOINT ["k", "kestrel"] ENTRYPOINT command is used to keep the container as executable. In this case, it’ll start kestrel server which will host ASP.Net site.

Build and run container image

1. Run Docker build command to build the image

2. Check available Docker images

3. Run Docker container

  •  -t switch attaches a pseudo-tty to the container (this switch will not be necessary in future versions of ASP.NET 5).
  • -d switch runs container in background.
  • -p switch maps local 80 port to 5004 port in container.
  • myapp is the Docker image we are going to use

4. See currently running containers

5. Goto http://localhost from browser

linux-local-asp-site-screen

 

Now you have a ASP.Net vNext site running on Linux with Docker. 🙂

Try it out and let me know what happen. Happy coding!! 🙂

Open GitHub HTML/JavaScript project in Visual Studio 2013

Early morning today, it came to my mind that I never used GitHub integration for Visual Studio in my life. With lots and lots of energy, I started to google about the topic. After going through few results I ended up with reading and trying out Rick Rainey’s blog, it is a really good blog post which summarise all the information needed to start and work with project on GitHub with Visual Studio.

But for me, I wanted to do a slightly different thing, I wanted to fork the jQuery project in GitHub and open it from Visual Studio. Really unlucky for me, this project didn’t have a Visual Studio solution file to open it. I had to create a new solution and the relevant projects which were needed. These are the steps I followed in order to accomplish this goal.

1. Fork JavaScript (in my case, jQuery) project from GitHub

2. Clone the project to the local machine, this will download project to given path. Copy the project path before click clone, this will help you in next step.
image
When you double-click on the project, you will notice that there aren’t any Visual Studio solutions for the project.

3. Goto File->New Project, search for “blank solution”. Paste path you copied in last step to the location and cut last folder name from it and paste it to solution name. In this way, it’ll add a solution file inside the cloned folder. Select “Add to source control” and create new solution.
image

4. Now you have a new solution without any content to work with. Now you can add either the whole GitHub project as one project to the solution or you can identify parts of it and create separate projects for those. Next I’m going to create multiple projects for separate sections of the project. Right click on the solution, Add->Existing Web Site. Select folder you consider as section of the project.
image
Now you have Visual Studio solution for GitHub JavaScript/HTML project.

Happy coding!! 🙂