Setting Up for Node.js Development

In my last post (Starting Out with Node.js for the as of yet uninitiated) I left off on a note that in my coming posts I would be developing an application with Node.js, but before we can get too far with that — there are several important steps that need to be taken care of. This post ended up becoming much longer than I’d first intended so let me summarize what’s ahead in it:

First, we’re going to get the tools we need for Node.js development.
Second, we’re going to (quickly) familiarize ourselves with those tools.
Finally, we’re going to explore the Node.js Command Line to see what running JavaScript code in Node.js looks like.

Once we’ve churned our way through this post, we’ll have a solid grasp on what bare-bones development for Node.js looks like, what tools we can use for Node.js development, how our JavaScript code will be run in the Node.js runtime environment and last but not least we’ll be ready to go ahead and start developing Node.js web applications!

The Right Tools for the Job

Developing with Node.js of course first requires that we have Node.js installed! I’m going to skip right over this step as installing Node.js is quite straightforward, but if you happen to be following along you can go ahead and download it right here. Furthermore we’re going to want some tools for doing the actual development.

As the overall theme of this series is “Starting Out with Node.js” I’m going to proceed with a very simple environment. By all means there are other options, such as the versatile Komodo IDE, the alluring Cloud9 providing a complete Ubuntu workspace in the cloud, or the much more traditional Nodeclipse (for setting up the popular Eclipse IDE for Node.js development).

Instead, I’m going to stick it out in Windows with two of my favourite tools for the platform: Cmder and Sublime Text. Both tools offer a portable version, with their downloads checking in at 4.27MB and 7.64MB respectively — so you have little to nothing to lose in downloading these applications to try out Node.js development: a couple of clicks, several seconds to download and you’re ready to go!

Alright, lets back up for a second here. I’m sure if this is your first time working with these tools you may very well be looking at these files you’ve downloaded and thinking: “Hold on Brandon, that all happened so fast… What exactly are these tools?”

Cmder

Cmder is a console emulator, that is to say, it emulates consoles for us and it does so very well. In the upcoming examples we’ll really only be working in the standard Windows command prompt (and the Node.js console), but Cmder does extend wonderfully to work with other command line tools such as PowerShell, MySQL, Oracle SQL*Plus, Python, and MongoDB (and many more!). Cmder itself (as it very honestly comes by on its home page) is built upon Clink enhancements with the ConEmu console emulator.

Several major things we like about Cmder:

It’s responsive. Some shortcuts to keep in mind: Cmder will show and hide itself with the key-combo ‘Ctrl’+‘~’. While ‘Alt’+‘Enter’ will toggle a full-screen mode. Also, a simple right-click will allow us to paste directly into the console and holding ‘Shift’ and highlighting text in Cmder will automatically copy it to our clipboard. (Keep in mind that ‘Ctrl’+‘C’ and ‘Ctrl’+‘V’ typically do not work for copying and pasting in any console, in fact, in consoles like the Node.js Command Line ‘Ctrl’+‘C’ is actually used to terminate (or close) the current Node.js process!)
It’s aesthetic. Cmder, by default, applies the Monokai color scheme for syntax highlighting. You’ll also notice that Cmder becomes transparent when its not active.

Cmder is a lot like Boo from Super Mario. Lightweight, transparent and it knows when we’re looking.

It’s configurable. Right-click at the top of the window or click the “hamburger” menu icon (≡) at the bottom-rightmost corner to access the Settings menu — but be prepared, this is a rabbit hole that goes quite deep. You may want to take some time to familiarize with all of the settings available here (or you can continue on through here and familiarize later).
And, of course, tabbed-browsing (this will come in handy for more advanced applications, where a database or other utilities will be getting involved).

Sublime

For those of you already using Sublime, you most likely love it. For those who haven’t had the pleasure of becoming acquainted with Sublime just yet: it is truly fantastic. Self described as the “sophisticated text editor” with “the slick user interface, extraordinary features and amazing performance” Sublime truly is the be-all and end-all text editor.

Again, let’s look at some major points for Sublime:

It’s functional. Indentation management, spell checking and auto-suggest among a host of other features that will keep everything under control and easily manageable for us. I suggest taking a moment at Sublime’s home page to soak in the demonstration there and get a brief overview of some of the features that Sublime has to offer.
It’s powerful. Consider checking out what’s available under the Preferences drop down, particularly your Key Bindings to see an extensive list of keyboard shortcuts you can use in Sublime, and even edit them right here in Sublime if you wish. Take special note of the “Goto Anything” function (access via. ‘Ctrl’+‘P’) and the Command Palette (access via. ‘Ctrl’+‘Shift’+‘P’).
It’s also aesthetic. Sublime, by default, also applies the Monokai color scheme for syntax highlighting. This is fantastic because it will maintain visual consistency with our syntax highlighting in Cmder. Consistency (at least of the visual variety) is a terribly undervalued concept in software development, we’re often told that consistency is a must-have in our end-products and in our code — but it is also a powerful organizational tool to have consistency throughout our workspace.
Finally, this tabbed-browsing keyword again. ‘Ctrl’+‘N’ for a new tab and ‘Ctrl’+‘W’ to close the current tab as well! Sublime really loves its keyboard shortcuts and you should love them too. (With that said ‘Ctrl’+‘W’ will work to close a tab in Cmder as well).

Getting Warmed Up

Let’s take a moment to break in our new tools. First let’s make Cmder our active window (that‘s ‘Ctrl’+‘~’ if its currently minimized!) and we can set up Cmder to emulate the Node.js Command Line! Well the reality is, it probably already is capable of emulating the Node.js Command Line without any set up. Go ahead and type “node” into your Cmder and hit enter.

Running the “node” command should look like this if Node.js is already set up properly. Notice how the Cmder symbol changes to the more commonplace ‘>’. Don’t worry if you receive an error message - I’m about to cover that as well.

If you run the node command, and you are met with an error, perhaps of the “node is not a recognized…” variety, you simply need to run the nodevars.bat file that came with your Node.js installation (or maybe you need to backtrack and install Node.js first!). You can simply navigate to the nodevars.bat and double-click it to run it, it should flash by almost instantaneously without much explanation for itself. (By default Node.js will install to your C:/Program Files/nodejs/ directory, so check there for your nodevars.bat first). In any case, after running nodevars.bat your path variables should be set up and the ‘node’ command should work as shown above.

Now things can get a little bit more interesting. Our ‘node’ command has brought us into the Node.js Command Line Interface (signified by the ‘>’ symbol). Here we can execute JavaScript on the fly, if JavaScript is an all-new concept to you, I’d recommend starting with the basics from somewhere like W3Schools, otherwise, let’s press on. You’ll immediately notice how the Node.js Command Line functions but, again, this is “getting warmed up” so let’s take it slow and declare a variable:

Here I’ve run a single line of code: **var first = “Hello”;** Consider that semicolons aren’t exactly necessary here but are used simply as a measure of consistent programming practices.

So having entered our single-line of JavaScript and reached the end of our code, we’re greeted by this “undefined”. That’s perfectly expected, our code (a simple variable declaration) had no return value so it’s only natural that the return value was undefined. For the sake of the example, let’s see what happens when our code does have a return value:

Hopefully this is making a lot of sense so far, even if you’re relatively new to JavaScript and Node.js.

Alright, so by entering our variable name (first), Node.js returned our variable’s value, in this case that value was ‘Hello’. Let’s go ahead and get our “Hello world!” out of the way now:

Ah, yes, there truly is no feeling quite as rewarding as running your first “Hello world!” application when learning something new.

Essentially here we have declared two variables, first and second. Specifically, first contained the word “Hello” so in our third line of code, I simply added a space to the end of it using the ‘+=’ operator. In our fourth line of code I declared a new variable, second containing the value “world!”, and finally, by appending second to first in our fifth line the console went ahead and printed “Hello world!” for us. Hopefully if my previous blog post left you confused about what a runtime environment for JavaScript was, we’ve cleared that up now: it’s an environment for our JavaScript to run in!

Now that we’ve gotten a sense of how Node.js works as a runtime environment, let’s wrap up for today. Although we can just shut down Cmder entirely, let’s use ‘Ctrl’+‘C’ to exit the Node.js environment in Cmder first, you should be prompted to press ‘Ctrl’+‘C’ one more time to confirm you want to end the process. This of course isn’t necessary and simply exiting Cmder will accomplish this just as well, however it is worth learning this small step to get used to managing your Node.js processes!

If you’ve made it this far you’ve successfully set up a great development environment for Node.js and even run some JavaScript inside of it! Stay tuned for the next post where we will look at building a fully functional Node.js application (as opposed to running small snippets of code) using Sublime Text!

Edit: If you’re ready I’m ready! Check out the next entry in my Starting Out With Node.js series: Programming a Web Application with Node.js