These tips might help you get your development space set up on a Mac.
Setting up a new Mac for web development can feel like standing in front of a blank canvas: exciting but slightly overwhelming, with checklists of tools and configuration settings to consider. But with a streamlined guide, it doesn’t have to be.
Whether you’re a beginner developer or seeking a concise web development setup for Mac, this guide will walk you through configuring your macOS from scratch for web development: installing essential applications and tools, setting up your shell environment, setting up Git and SSH, configuring VS Code, and even spinning up your first web project using Vite (a modern build tool for the web). By the end of this walkthrough, you will have a development environment ready for web development.
Let’s get your Mac ready to ship code.
If you’re setting up a new MacBook for the first time, macOS will guide you through the Setup Assistant, helping you set up your language and time zone, and sign in with your Apple ID. Once you land on the desktop, your first move should be to update macOS to verify you have the latest security patches and system updates installed.
This guide is structured to support both beginner and experienced developers. You can jump straight to the sections you need or follow it step by step. Here’s what we’ll cover:
Homebrew is a package manager for macOS and Linux that simplifies the installation and management of software from the terminal—eliminating the need to drag apps into folders or guess which version to download.
To install Homebrew, paste this into your terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Once installed, you’ll be able to install pretty much anything you need with a single command.
Here are some of the core apps I use daily—all installable using Homebrew’s --cask flag:
| GUI Applications | Purpose |
|---|---|
| Google Chrome | web browser |
| iTerm2 | terminal |
| Visual Studio Code | Text Editor |
| Rectangle | window resizing |
| Postgres | database |
| Slack | Communication |
| Discord | Communication |
| Docker | Development |
| Obsidian | Notes |
| Figma | Design |
| OBS | Streaming |
| Bitwarden | Password Manager |
| Spotify | Music |
| Maccy | Clipboard Manager |
To install them, run:
# Install GUI programs
brew install --cask \
google-chrome \
iterm2 \
visual-studio-code \
rectangle
I didn’t add all the apps, you can add more as needed—just use --cask for GUI apps.
These are my go-to command-line tools for productivity and development:
| Terminal Application | Purpose |
|---|---|
| wget | curl replacement |
| git | version control |
| nvm | node version manager |
| pnpm | node package manager |
| cmatrix | terminal screensaver |
Run the following command to install your them:
brew install \
wget \
git \
nvm \
pnpm \
cmatrix
macOS ships with Zsh as the default shell. Zsh (short for Z Shell) is a powerful Unix shell that serves both as an interactive command-line interface and a scripting language. To enhance its functionality, we use Oh My Zsh—an open-source framework for managing your Zsh configuration. It comes packed with useful functions, plugins, themes and helpers to boost your terminal productivity.
To install Oh My Zsh, run:
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
After installation, update Oh My Zsh and its plugins to the latest version:
omz update
You can add command aliases (shortcuts) by editing your ~/.zshrc file. Just use the alias keyword.
For example, if you’re on an Apple Silicon (M1/M2) Mac and need to switch between ARM64 and Intel (x86_64) architectures—say, for compatibility testing—you can create aliases like this:
alias x86="env /usr/bin/arch -x86_64 /bin/zsh --login"
alias arm="env /usr/bin/arch -arm64 /bin/zsh --login"
To check your current architecture, run:
uname -m
You’ll see either arm64 (Apple Silicon) or x86_64 (Intel).
Here are a few useful plugins you might want to enable:
To enable them, add them to the plugins=(...) array in your .zshrc file and restart your terminal.
The first thing you’ll want to do after installing Git is configure your global username and email. These details will be attached to all your commits.
git config --global user.name "Your Name"
git config --global user.email "you@your-domain.com"
You can create a helpful alias to visualize your Git commit history more clearly:
git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
Now, you can view a clean, colorized Git log using:
git lg
By default, Git creates a branch named master. If you want your default branch name to be main when initializing new repos, set it like this:
git config --global init.defaultBranch main
To check all your global Git settings:
git config --list
Or create an alias for quick access:
alias gitconfig="git config --list"
There are two common approaches to managing SSH keys:
I prefer the second approach, and in this section, I’ll walk you through it by connecting to GitHub via SSH.
First, navigate to your ~/.ssh directory (create it if it doesn’t exist):
# create a new directory in case the folder doesn’t already exist
mkdir -p ~/.ssh
cd ~/.ssh
# Optional: create an alias for quick access
# alias sshhome="cd ~/.ssh"
Now generate a new SSH key:
ssh-keygen -t ed25519 -C "github"
# Recommended file name: github
# Set a secure passphrase and store it somewhere safe
Check that the key was generated with the passphrase:
ssh-keygen -y -f github
# You'll be prompted for your passphrase
If the SSH config file doesn’t already exist, create it:
# in case the file doesn't exist yet
touch ~/.ssh/config
Then add the following configuration to use your new key automatically:
Host github.com
AddKeysToAgent yes
UseKeychain yes
IdentityFile ~/.ssh/github
This tells SSH to use your custom key whenever you connect to GitHub.
ssh-add --apple-use-keychain ~/.ssh/github
You can either copy the key manually or use the GitHub CLI (gh) to add it:
# Copy the public key to your clipboard
pbcopy < ~/.ssh/github.pub
# Then paste it on https://github.com/settings/keys
Or, using the GitHub CLI:
brew install gh # if not already installed
gh auth login # follow the interactive prompts
# Add your SSH key
gh ssh-key add ~/.ssh/github.pub -t "GitHub Key"
That’s it! You’ve:
You can now securely push, pull and clone over SSH.
Node Version Manager (NVM) is a command-line tool that lets you install, manage and switch between multiple versions of Node.js. It is particularly beneficial when handling projects that require various versions of Node.js.
Assuming you’ve already installed nvm using Homebrew (as described earlier), complete the setup with:
echo "source $(brew --prefix nvm)/nvm.sh" >> ~/.zshrc
source ~/.zshrc
# Or use an alias like:
# zshsource
nvm install --lts
After installation, check that both Node.js and npm (Node Package Manager) are installed successfully.
node -v # Displays the installed Node.js version
npm -v # Displays the installed npm version
npm install -g npm@latest
To save time when initializing new projects, you can configure npm’s default author metadata:
npm set init-author-name="your name"
npm set init-author-email="you@example.com"
npm set init-author-url="example.com"
If you plan to publish packages to npm:
npm adduser
To list all installed Node versions:
nvm list
To install a newer version and carry over global packages from your current version:
nvm install <version> --reinstall-packages-from=$(nvm current)
nvm use <version>
nvm alias default <version>
This installs the specified version, switches to it, and sets it as the default for future terminal sessions—while preserving global packages.
npm list -g --depth=0
You’re all set! You now have a fully working version of Node.js and npm—ready for development.
At this point, you can start your web development project either for frontend or backend. Since JavaScript is the fundamental language for the web, this section will guide you on how to quickly scaffold a frontend-focused web project using Vite, a lightning-fast modern build tool.
Vite is a modern frontend build tool created by Evan You (the creator of Vue.js). It’s designed to be extremely fast and efficient, helping developers build the next generation of web applications.
Vite offers features like instant server startup, lightning-fast hot module replacement (HMR), optimized production builds and built-in support for TypeScript, JSX, CSS and more. It also works seamlessly with popular frameworks like React, Vue and others right out of the box.
With Vite, you can skip the complex, tedious JavaScript development environment setup and dive straight into building your app.
To scaffold a new Vite project, run the following command :
npm create vite@latest my-first-project
This command will run to configure every necessary tool to scaffold a local development environment.
> npx
> "create-vite" my-first-project
│
◆ Select a framework:
│ ● Vanilla
│ ○ Vue
│ ○ React
│ ○ Preact
│ ○ Lit
│ ○ Svelte
│ ○ Solid
│ ○ Qwik
│ ○ Angular
│ ○ Marko
│ ○ Others
└
Vite can bootstrap various frontend frameworks and libraries. Select Vanilla to scaffold a plain web project.
Vite will ask you to choose a language, either JavaScript or TypeSscript. You can choose whichever one you prefer for your project. Use your arrow keys to get to your selection (here I have selected JavaScript):
◆ Select a variant:
│ ○ TypeScript
│ ○ TypeScript + SWC
│ ● JavaScript
│ ○ JavaScript + SWC
│ ○ React Router v7 ↗
│ ○ TanStack Router ↗
│ ○ RedwoodSDK ↗
You can see other options with SWC. SWC (Speedy Web Compiler) is a JavaScript/TypeScript compiler used in Vite for transforming JavaScript and TypeScript code. It’s a fast, low-level JavaScript and TypeScript compiler built with Rust, designed to deliver faster build times and better performance. For this guide, we’re sticking with the basic JavaScript option.
After setting up the framework, you will see an output that the project has been scaffolded in your project folder. Vite will then instruct you to install dependencies using npm(or any package manager you’re using):
◇ Scaffolding project **in** /Users/mac/my-first-project...
│
└ Done. Now run:
cd my-first-project
npm install
npm run dev
Navigate to your project folder as directed:
cd my-first-project
Then install the dependencies for this project:
npm install
Next, start the development server to verify everything is working. Use the following command to run the development server:
npm run dev
This command will then run your project in development mode. It will prompt the following outputs:
VITE v6.3.5 ready in 1227 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
Next, click on the link (http://localhost:5173/) to open the project in your browser:
While you’re free to use any code editor, VS Code is my go-to code editor for web development. It’s fast, lightweight, and has a vast library of extensions that enhance productivity and are suitable for web development.
You can download VS Code from https://code.visualstudio.com.
Once installed, I recommend enabling the code command from the terminal:
Shell Command: Install 'code' command in PATHNow you can use code to open any file or folder in VSCode directly from the terminal.
code .
This is my personal preference—you don’t have to follow it, but if you’re curious about my workspace:
I prefer moving the search view from the sidebar to the panel (bottom area). You can configure this via the Command Palette or JSON settings.
The JSON setting is long, so I’ve saved my settings file here for you: VS Code Settings JSON.
Feel free to explore or use it as a starting point.
Here are some of my custom keyboard shortcuts (stored in keybindings.json):
[
{
"key": "shift+cmd+e",
"command": "editor.action.copyLinesDownAction",
"when": "editorTextFocus && !editorReadonly"
},
{
"key": "shift+alt+down",
"command": "-editor.action.copyLinesDownAction",
"when": "editorTextFocus && !editorReadonly"
},
{
"key": "shift+cmd+d",
"command": "editor.action.deleteLines",
"when": "textInputFocus && !editorReadonly"
},
{
"key": "shift+cmd+k",
"command": "-editor.action.deleteLines",
"when": "textInputFocus && !editorReadonly"
}
]
These are totally optional. You can customize VS Code however suits your style best.
There are numerous extensions in VS Code for web development. Here are my top seven:
You can explore more on the Visual Studio Marketplace.
With Vite and VS Code set up, you’re now ready to start building fast, modern frontend apps with zero configuration hassle.
Update your system name (optional but helpful for networks or Airdrop):
sudo scutil --set ComputerName "Your-Mac"
sudo scutil --set LocalHostName "Your-Mac"
sudo scutil --set HostName "Your-Mac"
Also, disable file sharing unless needed.
" and 'Some of my favorite defaults tweaks via terminal:
# Show Library folder
chflags nohidden ~/Library
# Show hidden files in Finder
defaults write com.apple.finder AppleShowAllFiles YES
# Show path bar and status bar
defaults write com.apple.finder ShowPathbar -bool true
defaults write com.apple.finder ShowStatusBar -bool true
# Disable swipe-to-navigate in Chrome
defaults write com.google.Chrome AppleEnableSwipeNavigateWithScrolls -bool false
# Prevent Preview from reopening previously opened files
defaults write com.apple.Preview ApplePersistenceIgnoreState YES
If you use iTerm2 instead of the default Terminal app, here are some customizations I personally recommend:
By now, your Mac is no longer just a fresh machine—it’s a fully loaded development powerhouse tailored for modern web development. You’ve installed the essential tools, customized your terminal, set up Node.js, secured your GitHub workflow with SSH, and even scaffolded your first frontend project using Vite.
If you’re working with JavaScript, this guide provides the essential setup you’ll need for any frontend or backend web project with frameworks such as React, Vue, Angular, Next.js, Express.js or Nest.js. Even if you’re using other web development stacks, such as ASP.NET with Blazor, Python with Django, or Ruby on Rails, this guide still offers a solid foundation for web development on macOS, you’ll just need to refer to their specific documentation for your chosen stack to complete your setup or you can check the further resources section for reference.
Everything we’ve covered, from macOS settings and shell tweaks to VS Code enhancements, is about one thing: removing friction so you can focus on building. Of course, your setup will evolve over time, but with this foundation in place, you’re already way ahead of the curve.
Happy coding! Welcome to a smoother, faster and more enjoyable coding experience on macOS.
David Adeneye is a software developer and a technical writer passionate about making the web accessible for everyone. When he is not writing code or creating technical content, he spends time researching about how to design and develop good software products.