Learn You Node with VS Code

Node.js may not be the “new” hotness, but it’s still pretty hot, and getting hotter all the time. Whether you’re a .NET developer who’s still on the fence about JavaScript, or just haven’t gotten around to taking a look at Node, now is a pretty good time to do so, and in this post, I’ll show you a nice combination of tools that make learning Node easy and fun, namely nodeschool.io and the new Visual Studio Code editor.

What is Node.js?

On the off chance that you’ve found your way here, but don’t know what Node.js is, Node.js (sometimes referred to simply as Node) is an execution environment for JavaScript code, based on the V8 JavaScript runtime from Chrome. It’s designed to be fast, lightweight, and efficient. You can use node to write server applications in JavaScript, from real-time chat apps, to web APIs, to full web applications. While Node itself is pretty simple, with a [limited, but want another word] API set, it ships with NPM, the node package manager, which provides a fast and easy way to install packages, which are collections of functionality wrapped up in such a way as to make them easy to add to your Node projects. Node packages are available to facilitate all kinds of applications, including MVC-style routing engines, template engines, unit testing and more.

Learn better with video? Skip to the overview video at the end of this post.

Nodeschool.io

Nodeschool is both a series of ongoing workshop events and a website packed with open-source tutorials that will help you learn Node.js and related technologies via fun, interactive command-line challenges. Each challenge outlines a task for you to complete, gives you the background on how to go about it, and provides commands for you to verify that your solution is correct.

While I have not completed all of the tutorials available on Nodeschool, most that I have tried are high quality, and do a great job of teaching the core concepts. I have run into a couple of errors here and there, and the tutorials are not all consistent in terms of the level of detail provided in instructions, or in the reliability of the tutorial code, but for the most part they work very well. And since the tutorials are open-source (all the ones I tried are posted on Github), you can easily submit an issue for something that’s broken, or if you know how to fix it, submit a pull request and help improve the tutorial.

Visual Studio Code

For folks who may not be familiar with Visual Studio Code, it’s a lightweight code editor based on the Electron shell built by Github for their Atom editor. Microsoft originally used Electron to build the Monaco editor, aka Visual Studio Online. If you’ve ever edited a web site file from within the Azure Management Portal, you’ve used Monaco. Visual Studio Code is a stand-alone editor based on that work, with plenty of enhancements. It’s also much more streamlined than full Visual Studio, and provides a more distraction-free environment for working on your code, while still providing productivity features like IntelliSense, snippets, and more, with new features being added on a pretty regular cadence.

Installing Node.js

To take advantage of the nodeschool.io tutorials, you’ll need to have Node.js installed. You may already have a version installed, but if you don’t, you can just head over to https://nodejs.org/download/ and download the version for your platform.

IMPORTANT: While working on this post, the node team updated their versioning from v0.12.7 to a 4.x.x versioning. This change broke one of the modules used by the nodeschool tutorials on Windows such that the menu navigation does not work when using node version 4.x. You can read more about this issue, and track the resolution of it here. The workaround that I used is to install the 0.12.7 release from the “Other Downloads” link on the node homepage.

Finding Existing Node.js Versions

Note that Visual Studio 2015 has an option to install Node.js for working with task runners like Grunt and Gulp, so you might already have a version installed. But this version is installed in a way that does not put Node into the system PATH, so it’s private to Visual Studio (this was done to prevent conflicts with any existing Node install). Ryan Hayes discusses one pitfall of this in this blog post.

If you have Visual Studio 2015 installed, and chose the option to install Node, you have two options. You can go the normal install route for Node.js, or you can update your PATH environment variable to include the install path for the private copy of Node installed by Visual Studio (by default this would be C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\node & C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm for the Node Package Manager).

Installing Visual Studio Code

To get started with Visual Studio Code, simply head over to https://code.visualstudio.com/. The website should automatically detect your OS, and offer the correct download, but you can also choose alternate downloads (Windows, OS X, and Linux are supported).

At the time I’m writing this, Visual Studio Code is still considered a preview release, with the current version being 0.8.0. Despite the preview label, it’s quite stable, and very usable. And as noted above, with each updated release (releases have so far been on a monthly basis), more functionality is added.

Git Integration

Visual Studio Code has integrated support for working with git for source control, but is designed to work with your existing git installation, so if you do not already have git installed, you will need to install it to use it with Code.

NPM – The Magic Behind Nodeschool.io

The key piece of software that makes Nodeschool.io work is NPM. NPM, the node package manager, is used to install each tutorial module. You can then execute the tutorial by typing in the name of the tutorial. The command to install each tutorial is listed on the Nodeschool.io website. For example, to start the ‘javascripting’ tutorial, you’d type the following at the command line, after installing node.js:

npm install -g javascripting

This tells NPM to install the javascripting module, which includes downloading all of the files related to the module, while the -g parameter tells NPM to install these files globally, so that you can access them from anywhere at the command line. To run the tutorial, you can now simply type:

javascripting

at the command line. This pattern is consistent across all the tutorials, making them quite easy to use.

But Where Are the Files?

By default on Windows 8/8.1/10, the tutorial module files will end up in the folder C:\Users[USERNAME]\AppData\Roaming\npm\node_modules. To get the path to your npm global location, particularly if you’re on Mac or Linux, type the following at the command line:

npm config get prefix

NPM will return the local path to the npm folder. Your global modules will be in the node_modules subfolder.

If you don’t like the idea of installing a bunch of modules globally, it IS possible to install the modules to a local folder, and run them that way, but it’s harder, and not the intended path. For example, if you wanted to run the ‘javascripting’ tutorial, you could create a folder for the code (say, C:\node\javascripting), and switch to that folder in your command line, and execute the following command:

npm install javascripting

Note that this time, we’re not using the -g argument, so NPM will install the packages into a local node_modules folder. Since the command file isn’t at the root of the local folder, you now have to tell node where to find it, so to start the tutorial you need to type:

node_modules\.bin\javascripting

Be aware that I have not tested this with all of the tutorials, so it’s possible it may not work with all of them. Your best bet is to stick with the instructions and install the tutorial modules globally. If you are concerned about having too many modules installed globally, you can always uninstall them once you’ve completed a given tutorial, using the command (substitute the name of the module you want to uninstall):

npm uninstall -g javascripting

Writing and Editing Your Code

Once you’ve installed a tutorial, and before starting it, you can easily launch Visual Studio Code in the current folder by typing:

code . 

In Windows, I like to take advantage of the snapping feature to run my command line and Code side-by-side, like so:

Then when you launch a tutorial, you’ll get a helpful menu of the available exercises, right alongside the editor, as shown below:

You can navigate the list with the up/down arrow keys, and start an exercise using the ENTER key. For each exercise, you’ll usually be creating a new file (I used the pattern of naming each file the same as the exercise, so I could easily keep track of them, but you can name them whatever you like), which you can do either in Visual Studio Code (File > New File or Ctrl+N), or via the command line (on Windows, type: ‘type NUL > introduction.js’ to create the file introduction.js). Visual Studio Code will automatically pick up new files and folders as they’re added.

Running and Verifying Your Code

One of the important things you should understand about the Nodeschool tutorials is that they often rely on input values from the environment, many of which you’ll use in the exercises. As such, you can’t simply run the code using the usual pattern of ‘node [filename]’ from the command line.

The tutorials provide two ways to run your code such that the input values are available, RUN and VERIFY. In both cases, you start with the name of the tutorial, and then add either ‘run’ and then the name of the file you want to run (which allows you to test as you develop) or ‘verify’ and then the name of the file you want to verify (which allows you to see if your solution to the exercise is correct). So if you’ve completed the code for the ‘Introduction’ exercise in the ‘javascripting’ tutorial, you’d type the following at the command line to verify and complete the exercise:

javascripting verify introduction.js 

If your solution is correct, you should get a message to that effect. If it is incorrect, most of the tutorials will provide you with some tips on what to look for in correcting your code (note that some tutorials are better than others in that respect).

If, at any time, you want to reset the completed status of a tutorial, you can simply type:

tutorialName reset 

So for the ‘javascripting’ tutorial, this would be:

javascripting reset

Summary

The combination of NPM, Nodeschool.io, and Visual Studio Code provides a nice set of tools that make it easy to get started with JavaScript and node.js development, including a powerful command-line module installer, and a distraction-free code editor. The tutorials provided by Nodeschool.io are mostly simple enough to work through on your own, but if you run into any challenges, don’t fret. You can check the Nodeschool website for a local Nodeschool event in your area, or ask questions if you get stuck.

For a quick walkthrough of installing the necessary software and running the first challenge in the javascripting tutorial, check out the video below…

Video Walkthrough

Comments

Comment by rusty on 2015-10-05 21:50:39 +0000

Great post and video! Suggest adding a key stroke viewer to capture the short-cuts to your future videos. (Carnac http://code52.org/carnac/ – from hanselman.com).

Comment by G. Andrew on 2015-10-06 07:31:09 +0000

Thanks, Rusty! Appreciate the kind words and the suggestion.

Carnac looks interesting and I may give that a try. Will have to see if it can be filtered to just Ctrl/Alt/Win type key combos, as I’d prefer to avoid too much visual noise.

Comment by rusty on 2015-12-16 14:39:46 +0000

One more comment that might be useful: nodist (https://github.com/marcelklehr/nodist). Switch between node versions in Windows! Thanks to Jeremy Foster (@codefoster) for his tweet and his video https://channel9.msdn.com/Blogs/raw-tech/tidbits08 .