This content originally appeared on Telerik Blogs and was authored by David Adeneye Abiodun
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.
Getting Started
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:
- Installing Homebrew (The Developer Toolkit)
- Setting Up Your Shell with Oh My Zsh
- Installing and Setting Up Git
- Setting Up SSH Keys
- Setting Up Node.js via NVM
- Setting Up Your First Web Project with Vite
- Setting Up Visual Studio Code
- Optional macOS Tweaks & Customizations
Installing Homebrew (The Developer Toolkit)
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.
Installing Essential GUI Apps with Homebrew
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.
Install Terminal Tools
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
Setting Up Your Shell with Oh My Zsh
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
Custom Shortcuts
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).
Recommended Oh My Zsh Plugins
Here are a few useful plugins you might want to enable:
- zsh-autosuggestions – Suggests commands as you type, based on history
- zsh-completions – Adds extended tab-completion support
- zsh-syntax-highlighting – Highlights commands as you type, making it easier to spot errors
To enable them, add them to the plugins=(...) array in your .zshrc file and restart your terminal.
Installing and Setting Up Git
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"
Add a Better Git Log View
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
Set main as Default Branch
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
View Your Git Configuration
To check all your global Git settings:
git config --list
Or create an alias for quick access:
alias gitconfig="git config --list"
Setting Up SSH Keys
There are two common approaches to managing SSH keys:
- Using a single key for all services
- Generating a separate key for each service (recommended for better security and separation)
I prefer the second approach, and in this section, I’ll walk you through it by connecting to GitHub via SSH.
Step 1: Create a New SSH Key
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
Step 2: Verify the Key
Check that the key was generated with the passphrase:
ssh-keygen -y -f github
# You'll be prompted for your passphrase
Step 3: Configure SSH to Use the Key
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.
Step 4: Add Key to macOS Keychain
ssh-add --apple-use-keychain ~/.ssh/github
Step 5: Add the Public Key to 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:
- Generated a dedicated SSH key for GitHub
- Protected it with a passphrase
- Configured automatic usage in terminal sessions
- And linked it to your GitHub account
You can now securely push, pull and clone over SSH.
Setting Up Node.js via NVM
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
Install the Latest LTS Version
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
Update npm to the Latest Version
npm install -g npm@latest
Set npm Author Default (Optional)
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"
Log in to npm (For Library Authors)
If you plan to publish packages to npm:
npm adduser
Managing Node.js Versions
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.
View Global npm 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.
Setting Up Your First Web Project with Vite
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.
Setting Up Vite
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:
Setting Up Visual Studio Code
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.
Install and Configure VS Code
You can download VS Code from https://code.visualstudio.com.
Once installed, I recommend enabling the code command from the terminal:
- Press Cmd + Shift + P
- Search for and run
Shell Command: Install 'code' command in PATH
Now you can use code to open any file or folder in VSCode directly from the terminal.
code .
Optional: My Personal VS Code Setup
This is my personal preference—you don’t have to follow it, but if you’re curious about my workspace:
Move Search to Bottom Panel
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.
My VS Code Settings JSON
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.
My Keybindings
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.
Must-Have VS Code Extensions for Web Dev
There are numerous extensions in VS Code for web development. Here are my top seven:
- Web Dev Pack: A curated pack for frontend developers
- Prettier: Code formatting made effortless
- GitLens: Powerful Git visualizer inside VS Code
- Bracket Pair Colorizer: Makes nested code easier to read
- Code Spell Checker: Prevent typos and misspellings
- Github Copilot: Your AI pair programming buddy
- Eslint: Real-time linting for JavaScript/TypeScript
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.
Optional macOS Tweaks & Customizations
System Preferences
Appearance
- Enable Dark Mode.
- Set Scroll Bars to: Always show
Dock
- Remove unused apps from the Dock
- Enable Auto-hide Dock.
- Enable Show indicators for open apps.
- Enable Show recent applications in Dock.
- Go to Battery settings and enable: Show Percentage
Security & Privacy
- Turn on FileVault to encrypt your SSD.
- Under App Permissions: Allow apps from App Store and identified developers
- In Screen Recording: Add your browser
Sharing
- “Change computer name from the terminal”
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.
Keyboard Settings
- In Mission Control: Disable all shortcuts
- Set Fn key to: “Do Nothing”
- Key Repeat: Fast
- Delay Until Repeat: Short
- Under Text settings:
- Disable “Capitalize words automatically”
- Disable “Smart quotes and dashes”
- Disable “Add period with double‑space”
- Use straight quotes:
"and'
Trackpad Settings
- Tracking Speed: Max
- Enable Tap to Click
- Under Point & Click: Disable “Look up & data detectors”
- Under More Gestures: Disable “Notification Center” gesture
Terminal Defaults (macOS)
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
iTerm2 Setup (Optional)
If you use iTerm2 instead of the default Terminal app, here are some customizations I personally recommend:
- Set Iterm2 as the default terminal
- Preferences -> Appearances:
- Under Windows, check: “Hide Scrollbar”
- Under Tabs, uncheck: “Show tab bar in fullscreen”
- Profiles -> Window:
- Transparency: 10%
- Style: Full Screen
- Screen: Main Screen
- Profiles -> Advanced:
- Set Semantic History -> Open with editor to Visual Studio Code
Wrapping Up
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.
Further Resources
- Blazor Basics: Getting Started with Blazor Development in Visual Studio 2022
- React Basics: Getting Started with React and Visual Studio Code
- Vue Basics: Getting Started with Vue.js and Visual Studio Code
- Angular Basics: Setting up Angular Development Environment
- How to install Python & Django on Mac
- Learning NestJS Part 1: Getting Started
- Installing Ruby on Rail on Mac
This content originally appeared on Telerik Blogs and was authored by David Adeneye Abiodun
David Adeneye Abiodun | Sciencx (2025-09-26T13:40:49+00:00) Setting Up Mac for Web Development. Retrieved from https://www.scien.cx/2025/09/26/setting-up-mac-for-web-development/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.