macOS Web Development Setup Guide
Tags: development, setup, guide, macos
Published: 2021-12-08 19:20:51

## Table of Contents

- [What does this guide cover?](#what-does-this-guide-cover)
- [Why should you consider using it?](#why-should-you-consider-using-it)
- Guided Steps:
  - [Step 1: Factory Reset](#step-1)
  - [Step 2: Accounts](#step-2)
  - [Step 3: macOS Settings](#step-3)
     - [Show hidden files in Finder](#show-hidden-files-in-finder)
     - [Show path bar in Finder](#show-path-bar-in-finder)
     - [Show File / Directory Status in Finder](#show-file-directory-status-in-finder)
     - [Show all file and directory sizes](#show-all-file-and-directory-sizes)
     - [Show file name extensions](#show-file-name-extensions)
     - [Show reference to user in Finder sidebar](#show-reference-to-user-in-finder-sidebar)
     - [Turn on Firewall](#turn-on-firewall)
     - [Only Allow App Store and Identified Developer Apps](#only-allow-app-store-and-identified-developer-apps)
     - [Disable file sharing](#disable-file-sharing)
     - [Enable tap to click](#enable-tap-to-click)
     - [Disable auto correct spelling](#disable-auto-correct-spelling)
     - [Enable fast keystrokes and key repeats](#enable-fast-keystrokes-and-key-repeats)
     - [Auto hide docks](#auto-hide-docks)
     - [Show battery percentage](#show-battery-percentage)
  - [Step 4: Finder Directory Structure and Hierarchy](#step-4)
  - [Step 5: Screenshots](#step-5)
  - [Step 6: Set Up Development Environment](#step-6)
     - [Install Xcode Command Line Tools](#install-xcode-command-line-tools)
     - [Install Homebrew](#install-homebrew)
     - [Setup Shell](#setup-shell)
     - [Install Oh-My-Zsh](#install-ohmyzsh)
     - [Git](#git)
     - [Setup SSH Key](#setup-ssh-key)
     - [Visual Studio Code](#visual-studio-code)
     - [Node Version Manager (NVM)](#node-version-manager-nvm)
     - [iTerm](#iterm)
  - [Step 7: Recommended Applications](#step-7)
  - [Step 8: Dock](#step-8)

---

## What does this guide cover?

This brief guide will go over a step-by-step process of setting up a web development environment for Software Engineers, specifically web developers. If you are new to web development or even an experienced pro, I think I got you covered. While this is not an exhaustive list for every cool hack or setting you may want for your development setup, I hope it helps to get someone started, without wasting a ton of time. 

Quick note, this is NOT an industry standard for how every developer should set up a development environment. There is no such thing as that. This is a personalized guide that I find handy whenever I set up a new macOS device or factory reset an existing one.

---

## Why should you consider using it?

Well… I’m sure developers always run into this whenever they start a new job or buy a new macOS device. They had their old development setup on their previous device that worked well, but now, they have to set up the entire process all over again. THIS is where this guide comes in. I know different developers will have different opinions and preferences for how they want to set up their development environment and that’s completely fair, but I hope they can at least take some helpful tips that I have added here.

Ok, enough talk, let’s get started!

---

## Guided Steps

> Prerequisites: 

- 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:

- You have a new macOS device (i.e., MacBook, MacBook Air, MacBook Pro, and so on) 

- You have an existing macOS device, but you want a fresh start with a factory reset.

If you have a new macOS device, you won’t need to factory reset it. Skip to [Step 2](#step-2) in that case.

While factory reset is completely optional for existing macOS devices, I prefer to start with that b/c I like a fresh new laptop to work with. 

Anyway, there are plenty of videos on YouTube on how to factory reset a macOS device, here is one that I prefer: 

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

---

### Step 2
> Accounts

**Sign into iCloud:** 
`System Preferences` > `Sign In (top right)`

![iCloud Sign In](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lfidfi49m22m1mii1sr.png)

**iCloud Preferences:**

![iCloud Preference - Part I](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3cgamfqb5thui142cvj.png)

![iCloud Preference - Part II](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce7drlr1wuc69e7nogvc.png)

_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
> macOS Settings

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

![Finder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yafwgqc2tktiku8qxmp4.png)

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

![Finder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9npbc71duwrmfpljixp.png)

#### Show File / Directory Status in Finder
- Open “Finder”
- `View` > `Show Status Bar`

![Finder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obufblyi6lezbtvtftbh.png)

#### 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 Preferences` > `Security and Privacy` > `Firewall` > `Turn On Firewall`

#### Only Allow App Store and Identified Developer Apps

- `System Preferences` > `Security and Privacy` > `General` > `Allow apps downloaded from` > `(Choose) "App Store and identified developers"`

#### Disable File Sharing
- `System Preferences` > `Sharing` > `(Uncheck) “File Sharing”`

#### Enable tap to click
- `System Preferences` > `Trackpad` > `(Check) Tap to click`

#### Disable auto correct spelling
- `System Preferences` > `Keyboard` > `Text` > `(Uncheck) Disable “Correct spelling automatically”`

#### Enable fast keystrokes and key repeats
- `System Preferences` > `Keyboard`
   - Set “Key Repeat”  to “Fast”
   - Set Delay Until Repeat” to “Short”

#### Auto hide docks
- `System Preferences` > `Dock & Menu Bar` > `(Check) “Automatically hide and show the Dock”`

#### Show battery percentage
- `System Preferences` > `Dock & Menu Bar` > `Battery (left sidebar)` > `(Check) “Show Percentage”` 

---

### Step 4
> Finder Directory  Structure & 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
```

---

### Step 5
> 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 6
> Set Up Development Environment

Open Command Line / `Terminal`

#### Install Xcode command line tools
- Run `xcode-select --install`

#### Install Homebrew
- Run `/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`
- 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:
- `brew install node`
- `brew install tree`
- `brew install blueutil`
- `brew install --cask iterm2`
- `brew install --cask visual-studio-code`
- `brew install --cask google-chrome`
- `brew install --cask firefox`
- `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 short 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

![.zshrc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrzdh27zwxcgni9o1ozk.png)

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](https://github.com/zsh-users/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](https://github.com/zsh-users/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](https://project-awesome.org/unixorn/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](https://dev.to/npranto/quick-bite-ssh-key-4llh) 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:

<pre>
bradlc.vscode-tailwindcss
christian-kohler.path-intellisense
CoenraadS.bracket-pair-colorizer
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
stevencl.addDocComments
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
</pre>


    - Now, open the command line, go into the `extensions.txt` file level, and run `cat extensions.txt | xargs -L1 code --install-extension` (installs all these cool extensions automatically, all at once):
       - npm Intellisense
       - Path Intellisense
       - ESLint
       - Prettier - Code formatter
       - Live Share
       - Auto Close Tag
       - Bracket Pair Colorizer 2
       - 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
    
- [Install FiraCode Font](https://github.com/tonsky/FiraCode)
  - [Download](https://github.com/tonsky/FiraCode#download--install) 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:

<pre>
{
  "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
}
</pre>

  - _(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.39.0/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

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](https://github.com/ohmyzsh/ohmyzsh/wiki/Themes) 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 7
> Recommended Applications:

- [Alfred](https://www.alfredapp.com/) - a solid replacement for Spotlight search

- [AppCleaner](https://freemacsoft.net/appcleaner/)

- [CleanMyMac](https://macpaw.com/cleanmymac)

- [AS Timer](https://apps.apple.com/us/app/as-timer/id512464723?mt=12) 

- [Brave Browser](https://brave.com/download/)

- [Discord](https://discord.com/download)

- [GitKraken](https://www.gitkraken.com/download)

- [Google Chrome](https://www.google.com/chrome/)

- [iTerm](https://iterm2.com/downloads.html)

- [ImageOptim](https://imageoptim.com/howto.html)

- [Notion](https://www.notion.so/desktop)

- [Slack](https://slack.com/help/articles/207677868-Download-Slack-for-Mac)

- [Surfshark (VPN)](https://surfshark.com/download/macos) 

- [Taskboard](https://tasksboard.com/app) 

- [Trello](https://apps.apple.com/us/app/trello/id1278508951?mt=12)

- [Visual Studio Code](https://code.visualstudio.com/download)

- [VLC](https://www.videolan.org/vlc/download-macosx.html)

- [WhatsApp](https://www.videolan.org/vlc/download-macosx.html)

- [Zoom](https://zoom.us/support/download?os=mac)


### Step 8
> Dock

![Dock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4zle1hv7nqjjy8kpp0f.png)

---

_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:_
- https://dev.to/v3frankie/setup-your-mac-for-development-2020-edition-1c8a
- https://github.com/nicolashery/mac-dev-setup#system-update
- https://www.youtube.com/watch?v=RxhQtos5ruc
- https://nordlocker.com/blog/how-to-show-hidden-files-mac/
- https://www.mactrast.com/2017/03/show-status-bar-finder-macos-sierra/
- https://github.com/nvm-sh/nvm
- https://draculatheme.com/iterm
- https://www.youtube.com/watch?v=tMNOpaQrfAE&ab_channel=CodingGarden