Mac Web Developer Setup: Terminal, zsh, Git, Node, VS Code, Homebrew, and GitHub CLI

#mac #node #nvm #zsh

I’ve had to set up a Macbook for development three times this year, and hit road blocks each time. This time, I decided to write down and record the process based on what I’ve learned from previous attempts.

My machine specs
Note
Video walkthrough of the process
1. iTerm2
- Installation
2. Xcode Command Line Tools (CLT)
- Validation
3. Git
- Validation
4. ZSH
- Configuration
5. NVM
- Installation
- Troubleshooting Notes
6. VSCode
- Installation
7. Homebrew
- Installation
8. GitHub CLI
- Installation

My machine specs: Macbook Air, M1, Monterey 12.6

Here is my checklist, complete with links to documentation, run commands, and notes for potential issues you may encounter. It’s important to complete the steps in order, as there are dependencies installed in each step required for later installations.

Note

These are based on my experience with trial and error setting up a machine. If you have recommendations for improving this process, please comment!

Video walkthrough of the process:

1. iTerm2

Terminal alternative for Mac, recommended to me and I’ve used it for years.

Installation

Install from download via https://iterm2.com/
will automatically install Xcode CLT

2. Xcode Command Line Tools (CLT)

This should be installed already via Step 1, but it's important to validate the entire package was installed.

Validation

validate full package installed via iTerm2 with xcode-select -p
Should see /Library/Developer/CommandLineTools
Run ls /Library/Developer/CommandLineTools/usr/bin/git
Should see /Library/Developer/CommandLineTools/usr/bin/git
Source: https://mac.install.guide/commandlinetools/2.html

3. Git

Installs automatically with Xcode CLT, but also important to validate installation was successful.

Validation

validate with git --version
Will prompt installation if not already installed
Source: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

4. ZSH

ZSH is the shell used in your terminal. As of MacOS 10.15, ZSH is the default over Bash. If you are using Bash or have Bash installed, your setup will be different.

Configuration

Confirm you are using zsh with echo $SHELL, should output /bin/zsh
Run ls .zshrc to see if you have a zsh profile
If not found, touch ~/.zshrc then ls .zshrc again to confirm
Source: https://mac.install.guide/commandlinetools/1.html

5. NVM

NVM is recommended to navigate between versions and to avoid permission issues when installing Node directly on Mac.

Installation

Run curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | zsh
Restart terminal instance
Validate nvm installation with nvm -v
nvm install --lts
- This installs the latest long-term support version of Node, recommended for most users (https://nodejs.org/en/)
- Can also specify a certain version or nvm install node for latest version
- first version installed becomes default, to update default in the future run nvm alias default <VERSION>
validate Node installation with node -v
Source: https://github.com/nvm-sh/nvm#install--update-script

Troubleshooting Notes

Source: https://github.com/nvm-sh/nvm#troubleshooting-on-macos
Since macOS 10.15, the default shell is zsh and nvm will look for .zshrc to update, none is installed by default. Create one with touch ~/.zshrc and run the install script again (already handled with step 4)
Homebrew installation is not supported. If you have issues with homebrew-installed nvm, please brew uninstall it, and install it using the instructions below, before filing an issue.
For Macs with the M1 chip, node started providing arm64 arch darwin packages since v16.0.0. For earlier versions, there were only darwin_x64 packages available but no darwin_arm64. If you are facing issues installing node using nvm, you may want to update to v16 or later.
You might need to restart your terminal instance or run . ~/.nvm/nvm.sh. Restarting your terminal/opening a new tab/window, or running the source command will load the command and the new configuration.

6. VSCode

A popular free code editor/IDE from Microsoft that provides a built-in terminal and various plugins for development.

Installation

Install via: https://code.visualstudio.com/docs/setup/mac#_installation
- Make sure to drag into your Applications folder before launching.
Set up launch from command line using instructions here: https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line
- This will let you run code . from a project directory to open in VSCode
- Update 4/1/2024: If the code command stops working, you may need to open the Command Palette and select Uninstall code command in PATH and reinstall to get it working again.

7. Homebrew

Recommended for GitHub CLI installation, and can be used for managing other packages installed globally on your Mac.

Installation

Xcode CLT required for installation (already handled with steps 1+2)
Run /bin/bash -c "$(curl -fsSL [https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh](https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh))" and follow prompts to install
May receive warning that brew is not in PATH with next steps. Run these two commands in your terminal to add Homebrew to your PATH:
- echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/cecelia/.zprofile
- eval "$(/opt/homebrew/bin/brew shellenv)"
Validate install with brew -v
Source: https://brew.sh/

8. GitHub CLI

Highly recommended for interacting with GitHub from the terminal. You can skip if you prefer to use GitHub Desktop or interact with GitHub via Git and HTTPS/SSH, you can skip this step.

Installation

brew install gh
Run gh auth login
Select GitHub.com or GitHub Enterprise
Select HTTPS or SSH
Set title for SSH key
Select Login via web browser, this will launch GitHub in your browser
Create key if needed and authenticate in web browser
Terminal output will confirm you are authenticated
Validate with gh auth status
Source: https://cli.github.com/manual/

Update 4/1/2024: If you authenticate via SSH, you should test your SSH key using the instructions here.

You'll also need to update your .gitconfig file with the correct name and email address. My preferred way to update is:

Run ls -a to confirm there is a .gitconfig file in your home directory.
Run code .gitconfig to open the file in VS Code
Make your edits and save.

Now you are all set up and ready to start developing! Check out the documentation for GitHub CLI for more information on how to set up projects, check out pull requests, and more.