« Previous Tutorial Next Tutorial »

We’re back with another Five Minute React Tutorial, the third, which is all about installing Node.JS. This is one of the few tutorials in the series that is really different depending on whether you’re on a Mac or a PC, so we’re going to cover both. That means this five minute tutorial might run a bit more the five minutes, but since you can skip one part or the other, it still counts as short, right?

Installing on Mac

Let’s start with OSX. We’re going to use Homebrew to install not Node, but NVM, from the command line. This is a web page, so I can’t hear you, but you may have asked: “What’s NVM?” It stands for “Node Version Manager,” and it’s a nice little piece of software that allows you to switch between multiple versions of Node on one machine without having to uninstall and reinstall constantly.

If you haven’t used Homebrew before, it’s pretty easy. It’s an application installation platform for OSX. Using it, you can get an updated list of apps it supports, then install any of them right from the terminal. You can also use it to update those apps, keep track of them, and basically make your life easier in several ways. Unfortunately, the people at Apple are too busy stuffing their billions into offshore banks to do the smart thing and buy Homebrew, making it a native part of OSX, so you have to install it first.

Let’s start by doing that. Open a new terminal window and type (OK, let’s be honest, copy-and-paste) the following code:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Note that these installation instructions are also available on Homebrew’s website. If for some reason it doesn’t install, you should check out their site for help, but it should be fine.

If, like me, you already had Homebrew installed, it’s still a good idea to update it. You do this by typing:

brew update

into your terminal (all Homebrew commands use the brew blah blah syntax). There’s some other great stuff you can do with Homebrew, like checking for outdated software and auto-upgrading it, but since we’re installing fresh right now, we’ll leave that alone.

Now that we have an installed or updated Homebrew, we can get NVM. To do this we type:

brew install nvm

and hit enter, but there’s a catch: because this is Unix, and there’s nothing Unix likes more than DIY, we have to manually add NVM to our shell in order to be able to use it. We also have to create a folder in which it can store Node versions. To do that, type the following in your terminal:

cd ~
mkdir $HOME/.nvm

Now it gets a little tricky. Editing your shell config file isn’t complicated but it can be intimidating if you haven’t done it before. I happen to use ZSH as a shell, and my config is stored in my home directory, in a file named .zshrc. If you use something else, yours will differ. The default shell that OSX ships with, for example, is called Bash, and the config file is .bash_profile. If you’ve installed some other shell, I’m afraid you’ll have to find out how to edit the config file yourself. Anyway, open your appropriate file and add these two lines to the end:

export NVM_DIR="$HOME/.nvm"
. "/usr/local/opt/nvm/nvm.sh"

Save the file, kill your terminal session, and open a new one. Now type:

nvm

and hit enter. You should get a handy list of commands!

Now that we have NVM available, we can install a version of Node. Or more than one version, if we want. In fact, let’s do that, just so we can see how to swap between them. Let’s start with the latest long-term stable version, which as of this tutorial is Node version 8.11.1. If you are coming to this tutorial later, the LTS version may have changed. I still recommend using 8.11.1, which is guaranteed to work with everything in this tutorial. You can always upgrade later once you're fully familiar with the Node ecosystem and ready to find/fix any issues that come up from the upgrade. Type

nvm install v8.11.1

and hit enter. That v is important, don’t just use the numbers. Since it’s the first version of Node we’re installing, we’ll be automatically set to use that one, but let’s quickly install the bleeding edge version, which as of this writing is 9.9.0. Type

nvm install v9.9.0

and hit enter, watch it install, and we’re good. You can type

nvm ls

to see what you’ve installed (and nvm ls-remote to see a gigantic list of all of the versions available to you, most of which you will never need or want). As you can see, we’ve got 8.11.1 and 9.9.0, but we’re using 9.9.0 (because it was the last one we installed) … let’s switch to the LTS version, by typing

nvm use v8.11.1

and hitting enter.

At this point, we’re all set to start using node. One small caveat I have to mention, though: any time you switch versions, you will have to reinstall any global Node modules you want to use. If you’re unclear on what that means, don’t worry, we’ll cover it. Basically since NVM creates a separate installation for each version of Node, anything you do while using a particular version is black-boxed from other versions. This can periodically be annoying, but it lets you retain real control over each separate Node installation. If you’ve already installed Node modules for a particular version, they’ll remain when you switch back to that version.

All right, let’s test and make sure Node’s working. The easiest way to do that is to type node and hit enter. This will take you into the Node console, which functions very much like your browser’s JavaScript console. You can pass it commands in JavaScript, and it’ll execute them when you hit enter. For example, type:

console.log(‘hello world’);

and hit enter. You’ll see the console log your text. You’ll also see it print “undefined” since the console always prints the return value of any command you give it. In this case, there’s no return value, so … undefined. If you were to type:

5+5

and hit enter, you’d get a return value of ten. This is … not terribly useful to us right now. We’re not going to work in the console; we’re going to work in code, and then let Node execute that code. It’ll log certain things to the console (most of which will be generated by the webserver we’re going to be using, Express), but we’ll be writing our code in Sublime Text.

So, that’s it! If you’re a Mac user, you can move on to the next tutorial.

Installing on Windows

If you’re a Windows user, thanks for your patience (or welcome back after skipping a bunch of video and/or text). We need to get Node.js up and running on our machine, which we could do simply by going to the Node website, choosing a version, and running the installer … but that means if we need to change versions, it’s a tedious process of uninstalling the old version and reinstalling the new one (especially if you’re downgrading, say from the cutting edge release to the long-term-stable release). That’s a pain. OSX has a handy Node Version Manager that lets you switch between multiple versions on the same machine. Does Windows have a similar program?

As a matter of fact, it does! As an added bonus, it’s slightly less obnoxious to install than the OSX option. The programs are not developed by the same people; the Windows version is brought to us by a gentleman named Corey Butler, who programmed it in Go because, in his words, “Trying to write a tool with the tool you're trying to install doesn't make sense to me.”

I think that makes sense, and it means that NVM-Windows doesn’t need to be updated to match new versions of Node, it can just add them to the list and let users install them. So, let’s get it up and running on our machine. Head for https://github.com/coreybutler/nvm-windows, click the releases tab, and grab nvm-setup.zip for the latest release (I'd avoid pre-releases, but you can go for it if you want!).

Let the zip download, open it up, and double-click the installer. Run through the setup instructions … I chose to leave everything on the default settings, but you can make changes if you want, then let it install.

There’s no graphical interface for NVM-Windows. Like the OSX program, it’s command line only, so fire up a command prompt. From here you can type:

nvm

and hit enter to make sure the program installed correctly. It should give you a list of commands. For right now, we’re most interested in nvm list, nvm use, and nvm install. Let’s start by typing

nvm list available

and hitting enter, which will show you a bunch of versions of Node that you can install (in addition to giving you a URL if you want to see the complete list, which is gigantic). Let’s go with the long-term stable version, which as of this writing is 8.11.1. If you are coming to this tutorial later, the LTS version may have changed. I still recommend using 8.11.1, which is guaranteed to work with everything in this tutorial. You can always upgrade later once you're fully familiar with the Node ecosystem and ready to find/fix any issues that come up from the upgrade. Type

nvm install v8.11.1

and hit enter, then watch it go. It takes a few seconds, but it should install and give you some info when it’s done. Let’s also install the bleeding-edge version of Node, which as of this tutorial is 9.9.0. To do that, type

nvm install v9.9.0

and hit enter. It’ll run through the same process as it did with 8.11.1.

Now if we type

nvm list

and hit enter, we’ll see that we have two options on our local machine. We want to use 8.11.1, but let's start by switching to 9.9.0. Type:

nvm use 8.11.1

and hit enter. Then type

nvm list

and hit enter to see that we're using it. As you can see, we are, but that's the long-term stable release. We're sticking with the stable version for right now, so let's switch to 8.11.1. Type:

nvm use v8.11.1

and hit enter. The v doesn't really matter in windows. Unlike with a Mac, you can use it or not, whichever you prefer. Note that depending on your security settings, you may have to click OK on a few prompts when switching between versions.

We’re ready to start using node. One thing I have to mention, though: any global Node modules you’ve installed only exist for the version you were using when you installed them. So if you installed something on 8.11.1 and want to use it on 9.9.0, you’ll have to reinstall it after you switch … but if you switch back to 8.11.1 anything you installed there will still be there. If you’re unclear on what global modules are, don’t worry, we’ll cover it.

Let’s test and make sure Node’s working. Just type node and hit enter. This will take you into the Node console, which functions a lot like your browser’s JavaScript console. You can pass it commands in JavaScript, and it’ll execute them when you hit enter. For example, type:

console.log(‘hello world’);

and hit enter. You’ll see the console log your text. You’ll also see it print “undefined” since the console always prints the return value of any command you give it. In this case, there’s no return value, so … undefined. If you were to type:

5+5

and hit enter, you’d get a return value of ten. This isn’t very valuable for us, since we’re going to be working in Sublime Text and then executing in Node, but it does show the basics: it’s a JavaScript environment in which you can run code. We’ll talk more about the node console and its benefits when we get to setting up our webserver, Express.

That’s it! Node’s installed and you’re up and running. See you in the next tutorial!

« Previous Tutorial Next Tutorial »