A Beginner's Guide to Web Dev Work Part 3: Node.js Local Environment

Published 21 Mar 2021

This is Part 3 of a series for folks who are new to web development. If you want to understand what exactly we're doing, check out Part 1.

Overview #

In this post we'll be installing Node.js. Standard disclaimer again: This is assuming you're on a Mac!

Step 1: Install NVM #

At the end of the day, we need Node.js in order to run this project locally. But! As a developer, you will likely end up working with multiple projects on your machine, and they could require different versions of Node. It may feel like a pain now, but it's a good practice to use a version manager to let you easily switch between different versions of Node. NVM, or Node Version Manager, is exactly that. There are probably other options out there, but NVM is popular and what I use.

As of March 21, 2021, this is the command you'll need to run. Just paste it into the terminal and hit enter.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

You can check NVM's docs for additional details.

If all goes well, you should see some sort of feedback as the terminal runs NVM's install script, and eventually a success message.

If you run into an error, all I can offer is that everyone goes through this particular hell of random errors when trying to run a new project locally. NVM's docs offer a decent troubleshooting section. If that doesn't resolve your issue, I recommend googling what seems to be the key part of the error message you receive, and try to find solutions online. StackOverflow can be a great resource. When in doubt, try searching for the error along with the version of MacOS you're running. Problems installing these packages typically involve operating system permissions.

I like to double check that packages have been installed successfully by checking for an explicit version, you never know when something won't register properly. So once you think you have NVM installed, close your terminal. (It's important to do this because some changes won't take affect until the terminal is restarted.) Then open it again and run this command:

nvm -v

If you get a number like 0.37.2, you're good to go!

Step 2: Install Node.js #

Once NVM is installed, there should just be one more command to run:

nvm install node

NVM will then install the latest version of Node. If you needed a specific version of Node, you would replace node with the exact version you want. You can read more about using NVM in their docs.

And again, it's a good idea to double check everything's registering as expected. Make sure you can see the version of Node you're currently running.

node -v

If you get back a version number, congrats! You officially have Node.js installed on your machine and ready to go.

Step 3: Run the project! #

You are officially ready to run this website locally. You've installed Git, pulled down code from GitHub, and installed the necessary prerequisites to run the project. Now you can install the project dependencies. (These dependencies are listed out inside of package.json.)

npm install

Once that finishes, there's only one more command to run:

npm run start

This should, within a minute or less, open up a browser window that displays the site running on localhost:3000. This is where you can start to see the benefits of this additional complexity. Downloading all these packages and getting your machine set up can often be a pain, but once it's working, you're able to install a defined set of packages and see this website running locally on your machine just like you'd see it when it's actually deployed somewhere.

Now you can start to tinker with the code and see changes. Thanks to some magic packages, your browser should display any saved changes automatically. You really have done all the hard stuff!

Coming soon: One last post to walk you through the basics of how to save some changes and make a pull request.