Mac Web Developer Setup: Terminal, zsh, Git, Node, VS Code, Homebrew, and GitHub CLI
Cecelia Martinez
Posted on September 20, 2022
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.
Table of Contents
- My machine specs
- Note
- Video walkthrough of the process
- 1. iTerm2
- 2. Xcode Command Line Tools (CLT)
- 3. Git
- 4. ZSH
- 5. NVM
- 6. VSCode
- 7. Homebrew
- 8. GitHub CLI
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
withecho $SHELL
, should output/bin/zsh
- Run
ls .zshrc
to see if you have azsh
profile - If not found,
touch ~/.zshrc
thenls .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 withnvm -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 withtouch ~/.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
, pleasebrew 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 selectUninstall code command in PATH
and reinstall to get it working again.
- This will let you run
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.
Posted on September 20, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
September 20, 2022