Try out our new PC setup tool (opens in a new tab)!
Handbook
Environment Setup

Streamlined frontend Mac environment

Last updated by Noel Varanda (opens in a new tab),
Developer Environment Setup
System Preferences
Homebrew
Desktop applications
Terminal Applications
Chrome extensions
Terminal
VSCode
Git
Node

Try out our new environment generator tool (opens in a new tab)!

This section covers the installation and configuration of essential tools and dependencies for frontend development environment on a MacBook.

This is an updated version of Robin Wieruch's article: Mac Setup for Web Development [2023] (opens in a new tab)

System preferences

The macOS system preferences can be adjusted to optimize your development environment.

# --- Screenshots ---
 
# take screenshots as jpg (usually smaller size) and not png
defaults write com.apple.screencapture type jpg
 
# --- Preview ---
 
# do not open previous previewed files (e.g. pdfs) when opening a new one
defaults write com.apple.Preview ApplePersistenceIgnoreState YES
 
# --- Finder ---
 
# show path bar
defaults write com.apple.finder ShowPathbar -bool true
# show status bar
defaults write com.apple.finder ShowStatusBar -bool true
# show full path in finder title bar
defaults write com.apple.finder _FXShowPosixPathInTitle -bool true
# show library folder
chflags nohidden ~/Library
# show hidden files
defaults write com.apple.finder AppleShowAllFiles YES
# show filename extensions by default
defaults write NSGlobalDomain AppleShowAllExtensions -bool true
# show all file extensions
defaults write -g AppleShowAllExtensions -bool true
 
# -- Keyboard ---
 
# set fast keyboard key repeat rate
defaults write NSGlobalDomain KeyRepeat -int 0

Close and re-open Finder or Terminal to see these changes

Applications

Homebrew (opens in a new tab), a package manager for macOS, enables the easy installation of various development tools and libraries, and can be installed using the following command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Run brew doctor to ensure everything works as expected:

brew doctor

Desktop applications

Install the following essential applications for frontend development:

brew install --cask \
  google-chrome  \
  firefox \
  iterm2 \
  visual-studio-code \
  docker \
  rectangle \
  slack \
  vlc \
  figma \
  zoom

Terminal applications

Install the following essential terminal applications for frontend development:

brew install \
  wget \
  git \
  nvm \
  pnpm \
  commitzen \
  gh

Chrome extensions

Enhance your web development experience by installing the following recommended Chrome extensions:

Development tools

Testing and debugging

Productivity

VSCode extensions

Enhance your frontend development experience in Visual Studio Code (VSCode) by installing the following recommended extensions:

Additionally but not always necessary

Use the following command in your terminal to install these:

code --install-extension GitHub.copilot \
  --install-extension dbaeumer.vscode-eslint \
  --install-extension esbenp.prettier-vscode \
  --install-extension eamodio.gitlens \
  --install-extension wix.vscode-import-cost \
  --install-extension naumovs.color-highlight \
  --install-extension planbcoding.vscode-react-refactor \
  --install-extension Prisma.prisma \
  --install-extension silvenon.mdx \
  --install-extension PKief.material-icon-theme \
  --install-extension bradlc.vscode-tailwindcss

Terminal

To enhance your terminal experience on macOS, follow these steps:

Open iTerm2

Install Oh My Zsh

By default, macOS uses zsh as the default shell. To improve the terminal experience, install Oh My Zsh, which provides various plugins, themes, and configurations for your terminal. Run the following command to install Oh My Zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Run an update

Once Oh My Zsh is installed, update all components, including plugins, to the latest versions:

omz update

Add aliases and plugins

Add the necessary aliases and plugins to your ~/.zshrc file. For a comprehensive list of available plugins, refer to the official Oh My Zsh Plugins documentation (opens in a new tab).

~/.zshrc
# ... Rest of .zsh file
 
# Which plugins would you like to load?
# Standard plugins can be found in $ZSH/plugins/
# Custom plugins may be added to $ZSH_CUSTOM/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
plugins=(
  git
  zsh-completions
  zsh-autosuggestions
  zsh-syntax-highlighting
)
 
# load zsh-completions
autoload -U compinit && compinit
 
# use nvm
source /opt/homebrew/opt/nvm/nvm.sh

Apply changes

If you make any changes to your Zsh configuration (.zshrc), remember to reload it to apply the changes:

source ~/.zshrc

Git

To set up Git for success and improve your development workflow, follow these steps.

Configure git

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

Set up conventional commits

Set up Git to use commitizen as the default commit message tool.

echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

Now, when you run git commit, you will be prompted to use conventional commit messages.

Improve git log

Improve the git log output with a custom format by adding the following configuration to your ~/.gitconfig file:

~/.gitconfig
[alias]
  lg = log --oneline --decorate --graph --date=format:'%Y-%m-%d %H:%M' --format='%C(auto)%h %C(bold blue)%an%C(auto)%d%C(reset) %s %C(green)(%cd)%C(reset)'

Now, you can use git lg to display a more visually appealing and informative Git log.

Set Default Branch to main

If you prefer to use main as the default branch instead of master, you can set it globally by running the following command:

git config --global init.defaultBranch main

This ensures that new Git repositories will be initialized with main as the default branch.

With these configurations in place, you are now set up for success with Git and can enjoy an improved development workflow.

Node

Install NVM (Node Version Manager)

Install NVM via Homebrew. NVM allows you to quickly install and use different versions of node via the command line.

brew install nvm

Updating shell config

Add the NVM initialization script to your ~/.zshrc file:

echo "source $(brew --prefix nvm)/nvm.sh" >> ~/.zshrc

Reload the shell configuration to apply the changes:

source ~/.zshrc

Installing node.js

Install the latest LTS version of Node.js using the following command:

nvm install --lts

Verify the installation and check the Node.js and npm versions:

node -v && npm -v

Update npm to the latest version:

npm install -g npm@latest

Set npm defaults

Set defaults for npm (replace "your name", "you@example.com", and "example.com" with your own information):

npm set init.author.name "your name"
npm set init.author.email "you@example.com"
npm set init.author.url "example.com"

Keep up to date with any latest changes or announcements by subscribing to the newsletter below.