There are plenty of articles on the topic but I wanted to take a different approach to talk less about what node does and instead show you. So let’s use node to get an app up and running and then try it in Visual Studio.
Learned Angular, Now What?
Why Bother with Node?
Node is a platform, and you’ve already got one of those with .NET or Java. So if it ain’t broke, right? Well, let’s assume that we stick with the back end in .NET, is there still a place for node in your development toolbox? Yes, there is. Let me be absolutely clear on this: learning node may be the best thing you do all year for your career.
Why? Because the package managers, tools, and and build automation are free, fantastic, fast, and efficient.
So what? You’ve got build tools in ASP.NET now. But consider that the Microsoft teams have begun embracing the concept that if the community has already chosen an awesome tool, they will hook into it from Visual Studio and their stacks. Point in case is node with grunt or gulp … or bower and npm … all of these are now accessible directly from Visual Studio as first class citizens.
Yes, node is a platform and you can run a web server or web API’s off of it. But let’s put that aside, and believe me when I tell you that the npm, bower, gulp and grunt are more than enough reason to give node a shot, regardless of your back end stack.
You'll likely want to run these commands a command window that has administrative permissions in Windows.
Node and NPM on Windows
So let’s take node for a whirl. I’ll assume you already have Visual Studio, but if you do not then I suggest you download the free Visual Studio Community Edition. While you can download node directly and install it, you still need to set up your paths. Installing node on Windows is simplest using Chocolatey. You can install Chocolatey by pasting this command into a Windows command prompt (make sure there are no line breaks as it should all be on a single line):
@powershell -NoProfile -ExecutionPolicy unrestricted -Command “iex ((new-object net.webclient).DownloadString(‘https://chocolatey.org/install.ps1’))”; && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
Chocolatey makes it easy to install node. Simply go to a command prompt and type the following command
choco install nodejs
This will also install npm. You may see some warnings, don’t worry about these.
Let’s make sure node worked by typing
node -v into the command window. This should display the current version of node that you just installed (current version when I wrote this is 0.10.33).
NuGet, NPM and Bower
Now that you have node, you can go get some of the essential packages for it. The first 2 are bower and npm. npm already is installed with node, so you have that. Wait … what is npm? If you are familiar with NuGet then you can think of npm as NuGet for node modules. You use npm to install packages to build apps and solve problems. Generally, npm is used for server side node packages (e.g. lodash, gulp, grunt, yeoman), but lately it is also becoming more popular for client side packages too (angular, bootstrap, knockout). Bower is the more popular client side package manager … so think of it as your NuGet for client packages (like angular).
OK, that’ a lot of terms … so the simple way to think about this is that you use npm to install server packages and bower to install client packages.
Let’s go get bower using npm. Bower is a client package manager, but before we can use it we need to get bower first. And bower runs on a machine to go get those client packages. So how do we install it? Using npm, like this:
npm install bower -g
This command tells npm to install bower globally. You can install a package globally or locally. Global packages are accessible on your machine from anywhere in the path, and you only have 1 global version of that package. This is ideal for things like bower which you want to use in many projects. Local packages are what your specific project needs. We’ll look at these more later, but for now know that bower is installed globally.
To prove this, move to any folder and type the following command to show the version
What's Installed Globally?
One way to see what packages are installed globally is to run the command
npm list -g --depth=0
This lists all global packages. The
--depth flag tells npm how many dependencies to show. Setting it to 0 says we just want to know the root packages, not everything they depend on. This should be a short list right now, including npm and bower.
Gulp and Grunt
npm install -g gulp grunt-cli
Notice you can install them both globally using npm on a single line. We’ll come back to these shortly, and I’ll hit gulp in more depth in a future post. For now just know that you made both grunt and gulp available via the command line interface (CLI).
Yo HotTowel !
It’s always fun to see some visual results. So let’s install yeoman (aka yo), a global npm package that helps generate apps. Let’s install yeoman globally by typing this command:
npm install -g yo
yo stands for Yeoman. Let’s then run
yo -v just to verify that it is installed. The first time you will see some text welcoming you to yeoman. After that you just see the version.
Once installed, we can take advantage of some yeoman generators. Let’s install HotTowel using this command:
npm install -g generator-hottowel
Now we have a generator that will scaffold an entire Angular app out of the box for us. So what do we do with it? Let’s take it out for a spin by creating a new folder for a new project called
myapp and changing directory to that folder.
Then go to that folder
Now let’s run the generator in this folder to create the app by typing:
yo hottowel helloWorld
You should see a lot of messages telling you what it created. This HotTowel generator creates an Angular app running on a node server, but there are generators for many types of projects. Some generators will prompt you with many options, too.
Before we run the app, make sure you have run all of the commands. If you have not, here is a quick list:
npm install -g bower grunt-cli gulp yo
npm install -g generator-hottowel
yo hottowel helloWorld
Now run the app by typing the following command:
gulp serve-dev --sync
If you followed all of the commands, you should see your browser open and navigate to the HotTowel app!
Now kill the server by going to your command prompt and hitting
I'll explore the HotTowel app and what is included in a future post.
Code, Run, Code, Run, and Fast!
Now open up the code in the
myapp folder in notepad, Sublime Text, or even Visual Studio. Make a change to the
dashboard.controller.js file in the folder
src/client/app/dashboard/ and notice how the browser refreshes with the changes.
Change the node server code in
src/server/app.js and save the changes and you’ll see the server restarts (notice the command window) and the browser then refreshes with the changes.
This happens using any editor, so pick your favorite!
How did that one command
gulp serve-dev --sync know what client code to run and to open the browser? And where is the server it created? The hottowel yo generator defined a series of package manifests that contain a list of npm and bower packages, and then it installed them for you. Think of this as NuGet package restore but for npm and bower. If you ever need to run them manually you simply type the following commands to install the packages locally:
npm install bower install
Then you used
gulp to run the code, fire up the server, and the launch the app in the browser. Gulp automated that process for us.
This will perform those and many more actions.
You may see an error about
gulp-notify. Ignore that for now, it won't hurt anything and I will be fixing it in HotTowel soon.
Now run this command to see the optimized and built code:
gulp serve-build --sync
When it opens in your browser, open the developer tools and go to the network tab. Then refresh the page and check out the number of scripts loaded. Notice it is all optimized into 2 scripts! You’ll also see a 3rs script for browser-sync, I’ll get into that more when I dive into HotTowel in a future post.
Enter Visual Studio
You just saw that you can do all of this from a command line. And frankly, there is a lot of power and efficiency to be gained by doing it from there. But an IDE like Visual Studio has a ton of value too, so let’s explore how these 2 worlds can come together using the new tooling Microsoft has been creating.
Open Visual Studio and choose
File and then
Open Web Site. Then select the
myapp folder. This will open the HotTowel project you just generated using yo. Now right click on the
gulpfile.js in Solution Explorer and select
> Task Runner Explorer.
Now you’ll see the Task Runner Explorer (TRX) showing list of tasks that are contained within the
gulpfile.js. You can run those tasks by double clicking them. Try this by double clicking the
test task. This runs the unit tests for the project and displays them in the output window in the TRX.
This works on a
gruntfile.js, so you can choose either Grunt or Gulp.
You can run other tasks here and in hook into bindings, which allow you to run tasks before or after builds (for example). Right click on the
analyze task and select
Bindings and then
Before Build. Then repeat that for the
test task. This will run the
build tasks before you build your project in Visual Studio.
Now install the Visual Studio Package Intellisense extension so we can get some intellisense for our bower and npm packages.
Now open the
bower.json and scroll to look at the dependencies list. This shows the client packages that HotTowel requires. Let’s say you want to add accessibility support to the Angular app so you decide to include the Angular ARIA module. You can do that by typing
bower install angular-aria --save from the command line. The
--save flag will add it to the dependencies list in
bower.json. Or you can simply type in the
bower.json file and use intellisense to find the package you want. You get intellisense for the package name and for the version!
This is pretty powerful because often you may not know the exact name of the package you want. Does it have a dash or a dot in its name? Now you have an easy way of finding out and avoiding typos. This also works with npm packages in the new Visual Studio tooling.
You can remove the angular-aria package now
Now let’s run the app form Visual Studio by double clicking the task
serve-dev and then opening the browser and navigating to http://localhost:8001.
Currently, I do not see a way to pass arguments and flags into the tasks via the TRX, which is why you had to open the browser yourself. I imagine this is coming in a future version or patch.
There is More Room to Grow for Visual Studio
I have to believe there is a lot more coming to Visual Studio as they have just begun to tap the node related features. I expect these should include karma (a test runner) and yeoman (generators) and also expand the existing features of bower, npm, gulp and grunt. I’m sure there are ways I’m not even thinking that they’ll tap into, too.
So was taking node for a spin worth it? Think about what you just did. You created a new app, optimized it, and ran it. You can then make changes in either server code or client code and it immediately updates in your browser. No IDE necessary!
You undoubtedly have a lot of questions. Feel free to leave them in the comments here. The point of this post is to demonstrate some of the possibilities of what you can do in a matter of seconds, quickly and efficiently using node, npm, bower, yo, and gulp.
I’ll be diving into more about these topics in future posts, including how to get up and running on a Mac with OSX, more on gulp and its related tools, and hottowel.