In order to use almost any development tools based in JavaScript, you'll need to know how to use npm and Node.js. Gulp, Grunt, and Webpack are a few examples of popular technologies you may have heard of that require a knowledge of the Node ecosystem.
I find myself writing about this over and over again in the prerequisites of an article I've begun to write. I'd prefer to write one definitive guide to refer to in the future, so here it is.
Prerequisites
To update your npm, type this into your terminal: npm install npm@latest -g Node versions and Long Term Support. Node.js has lots of versions! To use Node.js, and therefore npm, effectively, you’ll want to make sure that you are on a version that is supported by the Node.js team. In general, you should use the version of Node.js labelled. These are the versions that are consistently tested and supported by the Node.js build process at the time of writing. Step 0: The Quick Guide (TL;DR) to Get Node.js Installed on macOS. Here's the abbreviated guide, highlighting the major steps: Go to the Node.js Downloads page; Download Node.js for macOS by clicking the 'Macintosh Installer.
- Basic command line proficiency. Don't skip this step! If you don't know how to use the command line, you'll be fighting an uphill battle. The provided tutorial has everything you need to know.
Goals
- Learn what Node.js and npm are
- Set up Node.js and npm on Windows and Mac
What is Node.js?
JavaScript is a client-side programming language, which means it’s processed in the browser. With the advent of Node.js, JavaScript can also be used as a server-side language.
What is npm?
npm doesn't stand for Node Package Manager*, which means it’s the tool to connect to the repository containing all the Node.js programs, plugins, modules and so on.
*npm actually does not stand for 'Node Package Manager' but essentially that's what it is and does, so most people refer to it that way.
Local vs. Global
This is the most confusing concept to understand at first, so it's important to let this settle in. Traditionally, you're used to globally installing any sort of program or software on your computer. If you want Spotify, you'll download Spotify, and then it will be available to you.
With npm, you will have some global installs, but mostly everything will be done on a local project basis, meaning you'll have to install everything you need for each project in its own directory. If you want to have a project running Gulp and Sass, you'll create a directory, with a new npm install.
For future reference, any global installations will have the
-g
flag.Installation on Windows
Installing everything on Windows is a breeze.
Install Node.js and npm
Node.js and npm can be installed from a download link. Go to the Node installation page, and download the Node installer. I have a 64-bit Windows 10 OS, so I chose that one.
Once it's done, you can test to see both node and npm functioning by opening PowerShell (or any shell) and typing
node -v
and npm -v
, which will check the version number.All set.
Installation on a Mac or Linux
In order to install everything on a Mac, we'll be running commands in Terminal.app, and Linux distributions vary.
Install Node.js and npm
We’re going to use Node Version Manager (nvm) to install Node.js and npm.
Open the
~/.bash_profile
file, and make sure source ~/.bashrc
is written in there somewhere. Restart the terminal.Run the install command.
Run the use command.
Now that Node.js and npm are installed, test them by typing
node -v
and npm -v
.All set.
Create a Project
At this point, you're set to start setting up Gulp, Webpack, Browserify, or whatever your aim is. We can also create a simple project to test that everything is working properly.
Initialize Project
Navigate to the directory in which you want your project to exist - in my case, sites/node-test.
Now initalize a new project with npm.
The following will pop up in the terminal, and prompt you for a few
First, it will ask for a package name.
Version number.
Description.
The rest you can just press enter and skip. Now you'll notice we have a package.json file that contains all the information we entered.
A package.json is a file that contains metadata about the project, and handles the dependencies (additional software and modules) of the project.
Now, we're going to install our first dependency - a very important and useful package called left-pad, which will add white space to the left side of a string, adding up to a number.
For example, writing this:
Will output this:
left-pad is a package on npm, which as we stated previously contains the registry for all publicly available packages.
Install dependencies
To install a dependency with npm, we use the command
npm install dependency-name-here
. Now, simply running npm install
will download the dependency, but it won't save it to the project. Since we've already created our package.json, we'll use the flag --save
to install the dependency and add it to package.json.As long as you ran this command inside the project directory, it will successfully install the dependency by creating a node_modules directory. It will also create a package-lock.json file, which we can ignore. Finally, it updated our package.json file with a new line.
Now the project recognizes the left-pad dependency as existing
You can also run
npm install --save-dev
to specify that the dependency will only be used for development (not production) purposes.Run Node in the terminal
Let's create index.js in the root of our directory. This is everything you should have now:
For future reference, don't bother looking in the node_modules rabbit hole. It will get really overwhelming with bigger projects.
In order to use a dependency, we use
require()
and put it in a variable, like so:This will be the entirety of our index.js file, in which we require left-pad, run a
leftPad()
function, and send it to the console.Since Node.js is not recognized by the browser, we'll be testing this in the console. In your shell, run the
node
command followed by the filename in the root of your project.If everything went well, you should have printed
Hello, World!
to the console, with two spaces on the left.Conclusion
In this tutorial, we learned the following:
- What Node.js is
- What npm is
- How to install Node.js and npm on Windows or Mac
- How to make a local project
- How to install a dependency with npm
- How to run a file using a node_modules dependency in a shell
If you got lost at any point, view the source on GitHub.
With this knowledge, you're ready to start using Gulp, Grunt, Webpack, Browserify, or anything else that depends on Node.js or npm.
Here’s how I get productive for JavaScript/Node on Mac OS.
It includes iTerm2, zsh, Node, Visual Studio Code and some git commands.
Table of Contents
Setup iTerm2
- Install iTerm2
Change edit mode to natural text
- iTerm Preferences → Profiles → select your profile → Keys tab → Load Preset… → Natural Text Editing (See this StackOverflow answer)
New session should start where previous left off
- iTerm Preferences → Profiles → select your profile → General tab → Working Directory section → Reuse previous session’s directory option
Quit on tab close
- iTerm Preferences → General, “Closing” → “Quit when all windows are closed”
Increase font size
- iTerm Preferences → Profiles → select your profile → Text tab → Font section → Change font → Update font in the popup
- Fan of 16pt Monaco (12, 14 is just too small)
Enable infinite history
- iTerm Preferences → Profiles → select your profile → Terminal tab → Unlimited scrollback
Shell setup
zsh
With oh-my-zsh manager. Sets you up with auto-completion.
snazzy colour theme
Using iterm-snazzy, which is a case of downloading the
.itermcolors
file and choosing the theme from (iTerm Preferences → Profile > Colors > Color Presets…).Pure prompt
It’s simple, clean but gives you enough information to be productive.
(see Setup and configuration for how to get Node/npm up and running)
- Install using npm:
npm install --global pure-prompt
- Initialise by adding the following to your
.zshrc
:
As a developer it’s always good to have a few browsers and tools handy:
- Google Chrome: still a goto due to its solid and extensive dev tools. Usually I install the React or Vue dev tools.
- Postman for Mac: to manually test APIs
- Firefox: number 2 browser
- Brave: auto-blocks ads and tracking, sort of the “play” browser, its dev tools are a buggier/less ergonomic version of Chrome dev tools (this is because Brave uses Chromium under the hood)
- Safari - installed by default on Mac OSX, it’s a buggy browser, good to test using it since it surfaces weird SVG and cookies security policy quirks. Since it’s the default it’s also widely used by non-technical people.
- Enable the dev tools: Safari → Preferences → Advanced → Show develop menu in menu bar.
I use Visual Studio Code, it strikes the right balance between usable out of the box and customisable. The way I see it editors like vim or Atom need a bit of config before being productive, and others like Sublime or IDEs (WebStorm) don’t have the same plugin ecosystem.
Install VSCode command line tools
Open the dialog using CMD + P.
Use:
Shell Command: Install 'code' command in PATH
The VSCode command line tool usage examples:
code .
: open.
directory in VSCodecode -r .
: replace directory opened in VSCode with the current directorycode -a .
: add current directory to VSCode, ie. initialises a workspace
Must-have extensions
- Atom keymap: I’m not a fan of the default keybindings, this uses Atom-style ones, get it from the Visual Studio Marketplace or
ext install atom-keybindings
fromCMD + P
menu - EditorConfig for VS Code: “EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.” (see editorconfig.org), ie. helps you deal with tab size, trimming spaces etc. across code editors, get it here from the Visual Studio Marketplace or
ext install EditorConfig
fromCMD + P
menu
Nice to have extensions
- ESLint: “Integrates ESLint JavaScript into VS Code.”, get it from the Visual Studio Marketplace or
ext install vscode-eslint
fromCMD + P
menu - npm Intellisense: “autocomplete npm modules in import statements”, get it from the Visual Studio Marketplace or
ext install npm-intellisense
fromCMD + P
menu - Snazzy theme: same colour theme (snazzy) as I’ve got setup for the terminal for VSCode, get it from the Visual Studio Marketplace or
ext install snazzy theme
- Import Cost: “Display import/require package size in the editor”, get it from the Visual Studio Marketplace, or
ext install import-cost
Not many productivity apps, just Alfred, which I use as a better Spotlight Search and Clipy which is a clipboard manager.
Maccy
A simple clipboard manager designed for OSX.
It works out of the box better than Clipy (see below).
Install it through Homebrew:
Update the preferred hotkey to
CMD + shift + v
:Paste by default on selection of a clipboard item:
Superseded by Maccy Clipy
Bump up the number of “inline items” (Clipy → Preferences → Menu → Number of items place inline).
Set your screenshots to save to clipboard + enable the option to paste as plain text (Clipy → Preferences → Beta → Paste as PlainText + Save screenshots in history).
Update Xcode using
xcode-select
--``install
.Install Homebrew for package managements (think apt or pkg for Mac):
Install Node.js either from source, using the Mac installer or using Homebrew:
Install
n
– Interactively Manage Your Node.js Versions using npm (now that we have Node installed):npm install
--``global n
Switch to latest Node version using
n
:sudo n latest
Install jq (format and deal with JSON nicely in the terminal) and watch (run a command repeatedly) using Homebrew
Add a few git extensions:
- git-open: “Type
git open
to open the GitHub page or website for a repository in your browser.” usingnpm install --global git-open
- git-standup: “Recall what you did on the last working day.” using
git standup
, there are multiple install options (see git-standup#install), I usually go with:brew install git-standup
- git-lg: simpler/prettier
git log
:
Node Js Terminal Commands
Add the following minimal
.vimrc
, which enables syntax highlighting, has basic tab/tabsize configuration and enables line numbers display:Set up SSH keys and add to VCS hosting, see this GitHub help article:
- Generate a new key:
ssh-keygen -t rsa -b 4096 -C '*[email protected]*'
- Copy your public key to clipboard so you can paste it wherever your hosted Version Control system asks you to:
pbcopy < ~/.ssh/id_rsa.pub
Put percentage on power level, right-click the battery indicator and select “Show Percentage”.
❤️ Spotify
More at my /uses page.
(Optional) Docker, VirtualBox
Docker is a containerisation technology, think VMs but smaller. I recommend Docker for Mac.VirtualBox allows you to run Virtual Machines on Mac, install it at VirtualBox downloads.
Get The Jest Handbook (100 pages)
Node Js Mac
Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.
orJoin 1000s of developers learning about Enterprise-grade Node.js & JavaScript