Nazmuz Shakib Pranto

Posted on Dec 8, 2021 • Edited on Nov 23

macOS Web Development Setup Guide

#development #setup #guide #macos

What Does This Guide Cover?
Why Should You Consider It?
Steps:

What Does This Guide Cover?

This guide provides a step-by-step process for setting up macOS for web development, tailored for software engineers who’ve just gotten a new laptop without any prior configurations. Whether you’re new to web development or a seasoned pro, I’ve got you covered. While this isn’t an exhaustive list of every cool hack or setting out there, my hope is to save you time and get you closer to a functional setup without unnecessary hassle.

Quick Note: This is NOT an industry-standard guide for how every developer should set up their environment—there’s no such thing. This is simply a personalized approach I’ve found helpful whenever I set up a new macOS device from scratch.

Why Should You Consider It?

Let’s face it—setting up a new macOS device is a pain for developers. Whether you’re starting a new job or upgrading your machine, transferring that perfectly tuned development setup from your old laptop can feel like a daunting task. That’s where this guide comes in.

While every developer has their own preferences and opinions about the “best” setup, I hope you’ll find a few helpful tips here to make the process smoother.

Alright, enough talking... let’s dive in!

Steps

Prerequisite(s):

macOS: Big Sur or above

Step 1: Factory Reset

I am going to assume that you are perhaps in one of these 2 scenarios as you start this guide:

Let’s start with two scenarios:

You have a new macOS device (MacBook, MacBook Air, MacBook Pro, etc.)
You have an existing macOS device and want a fresh start with a factory reset.

If you have a new device, you can skip this step and move on to Step 2.

For existing devices, while a factory reset is optional, I prefer to start fresh. It gives you a clean slate to work with, free from any old settings or clutter.

Not sure how to do it? There are plenty of tutorials online, but here’s one I recommend:

“How To Erase and Reset a Mac back to factory default” - https://www.youtube.com/watch?v=RxhQtos5ruc

Step 2: iCloud Setup

Now that your laptop is all set up and you're on the home screen with the default Apple settings, let’s start by setting up your iCloud accounts.

If you’ve already logged into iCloud during the initial setup, feel free to skip this step and jump ahead to Step 3.

Sign into iCloud:
System Settings > Sign In (top right)

iCloud Preferences:

Note: The preferences above are solely based on my own choices, which obviously might differ quite a bit from others. So, feel free to enable/disable apps using iCloud as you see fit.

Step 3: System Settings

Show hidden files in Finder

Open “Finder” app
Press the Command + Shift + . (period) keys at the same time
Now, all hidden files should be shown

Show path bar in Finder

Open “Finder”
View > Show Path Bar
Now, the full path to a file should be shown

Show File / Directory Status in Finder

Open “Finder”
View > Show Status Bar

Show all file and directory sizes

Finder > View > Show View Options > (Check) “Calculate all sizes”

Show file name extensions

Finder > Preferences > Advanced > (Check) “Show all filename extensions”

Show reference to user in Finder sidebar

Finder > Preferences > (Check) <user> on the sidebar, i.e., “jsmith”

Turn on Firewall

System Settings > Network > Firewall > Turn On Firewall

Only Allow App Store and Identified Developer Apps

System Settings > Privacy & Security > Allow apps downloaded from > (Choose) "App Store and identified developers"

Disable File Sharing

System Settings > General > Sharing > (Uncheck) “File Sharing”

Enable tap to click

System Settings > Trackpad > (Check) Tap to click

Disable auto correct spelling

System Settings > Keyboard > Edit (inside Input Sources) > (Uncheck) Disable “Correct spelling automatically”

Disable capitalize words automatically

System Settings > Keyboard > Edit (inside Input Sources) > (Uncheck) Disable “Capitalize words automatically”

Disable add period with double-space

System Settings > Keyboard > Edit (inside Input Sources) > (Uncheck) Disable “Add period with double-space”

Disable use smart quotes and dashes

System Settings > Keyboard > Edit (inside Input Sources) > (Uncheck) Disable “Use smart quotes and dashes”

Enable fast keystrokes and key repeats

System Settings > Keyboard
- Set “Key Repeat” to “Fast”
- Set Delay Until Repeat” to “Short”

Auto hide docks

System Settings > Desktop & Dock > (Check) “Automatically hide and show the Dock”

Show battery percentage

System Settings > Control Center > Battery > (Check) “Show Percentage”

Step 4: Directory Structure and Hierarchy

- AirDrop
- Recents
- Applications
- Desktop
- Documents
- Downloads
- <user-directory>, i.e., “jsmith”
   - screenshots      // all screenshots live here
   - workspace
      - ___space___   // all development related configuration, contents and settings live here
      - projects      // all development projects live here
      - profile
         - avatar     // profile and social pictures
         - wallpaper  // (optional) wallpapers directory 
         - refs       // photo id, resume, or essential quick references live here

Screenshots

By default, all screenshots are automatically saved on the “Desktop.” This can clutter your home screen over time, so for a cleaner and more maintainable structure for screenshots, let’s set up a “screenshots” directory

Create a screenshots directory on the root level (under user’s directory, i.e., jsmith > screenshots)
Open screenshot app (Command + SHIFT + 5)
Update “Options” by setting “Save to” to the screenshots directory

Ok, now the real stuff... development environment

Step 5: Set Up Development Environment

Open Command Line / Terminal

Install Xcode command line tools

Open "Terminal" app
Run xcode-select --install
NOTE: this part usually takes a while (usually 30min - 1hr)

Install Homebrew

Open "Terminal" app
Run /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Run brew update; brew upgrade; brew cleanup; brew doctor to ensure brew is up to date and healthy

Now, with Homebrew installed, let’s download a list of essential tools and applications right from the command line:

Node.js:

brew install node

Display directories as trees:

brew install tree

Enable/Disable bluetooth:

brew install blueutil

Edit videos from the command line:

brew install ffmpeg

Edit images from the command line:

brew install imagemagick

Warp - better Terminal replacement:

brew install --cask warp

VS Code - Code Editor:

brew install --cask visual-studio-code

Install Browser (Chrome | Brave | Firefox):

brew install --cask brave-browser
brew install --cask google-chrome
brew install --cask firefox

Extension(s):

Bitwarden Password Manager

Buster: Captcha Solver for Humans

Grammarly: AI Writing and Grammar Checker App

Honey: Automatic Coupons & Rewards

HTML5 Outliner

JSONVue

Loom – Screen Recorder & Screen Capture

React Developer Tools

Redux DevTools

uBlock

Install Docker (optional):

brew install --cask docker

Setup Shell

Run echo $SHELL // expect “zsh” shell by default

Note: if you have a different shell, use the steps below to install zsh shell:

Run brew install zsh
Then, run chsh -s /bin/zsh

Install Oh-My-Zsh

Oh-My-Zsh is a popular framework for ZSH configuration, mainly to jazz up your command line

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

Add Alias:

Aliases let us add easy to remember shortcut commands that run much longer and multi-step processes in the command line

After installing Oh-My-Zsh, you should have a .zshrc configuration file on the root level

Open .zshrc file inside VS Code (Note: VSCode is code editor we installed via homebrew earlier)

Run code ~/.zshrc

Under “# Example aliases”, add these aliases:

To keep brew up to date and clean - alias brewup=”brew update; brew upgrade; brew cleanup; brew doctor”
Shortcut to copy SSH - alias copyssh=”pbcopy < ~/.ssh/id_rsa.pub”
Shortcut to open .zshrc file - alias openzshrc=”code ~/.zshrc”
Shortcut to go to projects directory - alias gotoprojects=”cd ~/workspace/projects”
Shortcut to turn Bluetooth on/off:
- ON - alias bton=”blueutil --power 1”
- OFF - alias btoff=”blueutil --power 0”

Add ZSH plugins:

Plugins help to add more enhancements to Oh-My-Zsh. I always go with this 2 must-haves:

zsh-autosuggestions
- Run git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions inside the command line
- Now, add the plugin name to the plugins list inside .zshrc file: plugins=(zsh-autosuggestions)
zsh-syntax-highlighting
- Run git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
- Add to plugins list in .zshrc file: plugins=(zsh-syntax-highlighting)

Note: If you are interested in installing more plugins, check out awesome-zsh-plugins

Git

Run brew install git, if git is NOT installed already
Run brew upgrade git, to install the latest version of git on system
Run git config --global user.name "<FIRSTNAME> <LASTNAME>" (keep the quotes)
Run git config --global user.email "<EMAIL>" (keep the quotes)
Run git config --global color.ui auto

Setup SSH Key

SSH key enables a password-less way to talk to another computer or a server from your local machine. Check out Quick Bite: SSH Key if you want to learn a little bit about SSH keys.

Anyways, let’s set up an SSH key...

To check for existing SSH key, run ls ~/.ssh/id_rsa (if you see “No such file or directory”, then continue to generate a new SSH key)
To generate a new SSH key, run ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
To copy SSH key, run pbcopy < ~/.ssh/id_rsa.pub

Visual Studio Code

Open VSCode (Finder > Applications > Visual Studio Code.app)
Open command palette inside VSCode - CMD + p
Once search bar pops up, type >shell command, choose Install 'code' command in PATH
Install VSCode extensions:
- Create a new file (extensions.txt) file inside workspace/___space___/ directory
- Paste in the following list of extensions inside extensions.txt file:

bradlc.vscode-tailwindcss
christian-kohler.path-intellisense
dbaeumer.vscode-eslint
dracula-theme.theme-dracula
dsznajder.es7-react-js-snippets
eamodio.gitlens
EditorConfig.EditorConfig
esbenp.prettier-vscode
formulahendry.auto-close-tag
formulahendry.code-runner
johnpapa.vscode-cloak
Mikestead.dotenv
nathanchapman.JavaScriptSnippets
PKief.material-icon-theme
pnp.polacode
ritwickdey.LiveServer
sdras.night-owl
streetsidesoftware.code-spell-checker
thedavej.night-owl-black
tombonnike.vscode-status-bar-format-toggle
WallabyJs.quokka-vscode
wayou.vscode-todo-highlight
xabikos.JavaScriptSnippets
Yzhang.markdown-all-in-one
sourcegraph.cody-ai
prisma.prisma
rangav.vscode-thunder-client

Now, open the command line, go into the extensions.txt file level, and run:

cat extensions.txt | xargs -L1 code --install-extension

... to install all these cool extensions automatically, all at once:

   - npm Intellisense
   - Path Intellisense
   - ESLint
   - Prettier - Code formatter
   - Live Share
   - Auto Close Tag
   - DotENV
   - Live Server
   - Add jsdoc comments
   - Code Spell Checker
   - DotENV
   - Dracula Official
   - EditorConfig for VS Code
   - GitLens — Git supercharged
   - Markdown All in One
   - Material Icon Theme
   - Night Owl
   - Night Owl Black
   - ES7 React/Redux/GraphQL/React-Native snippets
   - Palacode
   - Prettier - Code formatter
   - Quokka.js
   - Tailwind CSS IntelliSense
   - TODO Highlight
   - Cody: AI Coding Assistant with Autocomplete & Chat
   - Prisma
   - Thunder Client

Install FiraCode Font
- Download FiraCode inside workspace/___space___ directory
- Now, unzip it
- Go into the ttf directory
- Select all font files
- Right-click and select Open
- Select "Install Font"
VSCode Settings
- Open command palette - CMD + p
- Inside the search bar, type in > open setting and choose Preferences: Open Settings (JSON) from the given options
- Now, paste in the following rules (in JSON) in it:

{
  "editor.fontSize": 18,
  "editor.fontLigatures": true,
  "editor.fontFamily": "Fira Code",
  "editor.wordWrap": "on",
  "workbench.colorTheme": "Dracula Soft",
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "workbench.iconTheme": "material-icon-theme",
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontSize": 14,
  "editor.tabSize": 2,
  "prettier.requireConfig": true
}

(Optional) install “Settings Sync” extension to keep all of your VSCode extensions and settings in Sync on GitHub. Here is a great video showcasing that - https://www.youtube.com/watch?v=f-uzUsHTQ8s&ab_channel=JamesQQuick

Node Version Manager (NVM)

NVM lets you install multiple versions of Node.js inside your local machine. This can be essential at times when you have to go back and forth between different projects using different Node versions.

Install NVM:

Run curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
Verify installation - command -v nvm (output should be nvm)
Usage:
- Run nvm install node, to install the latest version of Node
- Run nvm install <version>, to install a specific version, i.e., nvm install 14.7.0
- See list of Node versions installed - nvm ls
- To use the default node version - nvm use node
- To set alias default version - nvm alias default <version>
- To uninstall a node version - nvm uninstall <version>

iTerm 2

Note: if you are already happy with Warp, no need to use iTerm 2. It's just another Terminal app replacement

A great alternative to Terminal.app for command line

Preferences:

Profiles > General > Working Directory > (Choose) “Reuse Previous Session’s Directory”
Profiles > Font > Size (16)

Themes:

3 Options:

Oh-My-Zsh Theme (easiest to set up)
Dracula Theme (what I use)
Powerlevel10k Theme (coolest option)

Oh-My-Zsh Theme:

Pick a theme from this list
Update “ZSH_THEME” inside .zshrc file with your favorite theme
Example: ZSH_THEME="awesomepanda"

Dracula Theme:

Open iTerm and go into workspace/___space___ directory
Run git clone https://github.com/dracula/iterm.git
Activating theme
- iTerm2 > Preferences > Profiles > Colors Tab
- Open the Color Presets drop-down in the bottom right corner
- Select Import from the list
- Select the Dracula.itermcolors file (from “workspace/space/iterm” directory)
- Select "Dracula" from Color Presets

Powerlevel10k Theme:

Open iTerm and go into workspace/___space___ directory
Run git clone --depth=1 https://github.com/romkatv/powerlevel10k.git
Run echo 'source ~/workspace/___space___/powerlevel10k/powerlevel10k.zsh-theme' >>~/.zshrc
Now, restart iTerm
You should be prompted by Powerlevel10k to customize your iTerm
Follow through each step with provided instructions to setup your own customized iTerm UI preferences

Step 6: Recommended Applications:

Raycast - a solid replacement for Spotlight search
Loop - window management for macOS
Amphetamine
AppCleaner
CleanMyMac
AS Timer
Pure Paste
Google Chrome
Brave Browser
Firefox
Arc - alternative browser experience
Discord
GitKraken
iTerm
ImageOptim
Notion
Slack
Surfshark (VPN)
Taskboard
Trello
Visual Studio Code
VLC
WhatsApp
Zoom
DisplayLink (optional)
Descript (optional)

Step 7: Dock

Before I leave, a few things...

📑 bookmark this page in case you want to refer back to it later on
👍 share this article with your peers or anyone who might want to set up a macOS for web development
💌 if I got anything wrong in this article, please leave a kind feedback

References: