Josh Wheeler | Blog - My Mac Dev Environment Setup

Foreword

Given that I've never developed on macOS before, I thought it would be a good idea to document my full stack web development environment setup to help future Me and anyone else out there.

NOTE: This is a highly opinionated guide on setting up mac's for full stack web development. This setup won't work for everyone.

General Settings
Terminal
- Alacritty
- Homebrew
- Git
- zsh
- tmux
IDE - Neovim
CLIs
Desktop Apps
- Alfred
- Spectacle
- iGlance
- Brave
Useful Links

General Settings

Before getting into any development-specific setup, let's first customise some system and Finder settings:

Acquire some additional screen real estate by hiding the app dock:
- Go to System Settings -> Dock & Menu Bar and do the following:
  - Set Position on Screen to Right
  - Move the dock size slider to the smaller side
  - Untick Show recent applications in Dock
  - Tick Automatically hide and show the Dock
- Now the dock will only appear when the cursor hovers over the right hand side of the screen.
Disable Spotlight to be the default ⌘ + space shortcut. We will later be calling Alfred with this shortcut:
- Go to System Settings -> Keyboard shortcuts
- Untick Show Spotlight search for ⌘ + space
Disable Ask Siri
Disable track pad natural scroll direction
- Go to System Settings -> Trackpad -> Scroll & Zoom
- Untick Scroll direction: Natural
Keyboard: I use a UK Layout mechanical keyboard, so will need to make the following changes:
- System Settings -> Keyboard -> Input Sources select British PC
- System Settings -> Keyboard -> Select My Keyboard -> Modifier Keys:
  - Change the Option Key to ⌘ Command
  - Change the Command Key to ⌥ Option
Finder
- Finder -> Preferences -> Show all file name extensions
- ⌘ + shift + . to show dotfiles
- Remove unrequired favourites in sidebar.

Terminal

The terminal is where all the magic happens on a developer's machine. It's what we spend most of our day in. So it's important that I use one that is reliable, fast and highly customisable.

Alacritty

The terminal that ticks all the boxes for me is definitely Alacritty. Alacritty markets itself as a modern, fast, cross-platform GPU-accelerated terminal emulator.

Yes, I have tried iTerm2, but honestly it just felt a bit clunky and too memory hungry. I also wasn't a fan of the awkward tmux integration built into it.

For me personally, one of the best features of Alacritty is that all the configuration is managed by a yaml file. As a result, the configuration can be version controlled and easily replicated between machines!

To install Alacritty, simply follow the instructions on the repo. Once it is installed, create an alacritty.yml file:

vim ~/.config/alacritty/alacritty.yml

Then copy across my alacritty.yaml configuration.

Homebrew

Package managers simplify installing, updating and removing software on the operating system. Homebrew is the most popular package manager for macOS. For those coming from a Linux (Debian) background, Homebrew is essentially just the mac equivalent of apt.

I pretty much use brew to install everything I use.

Before installing Homebrew, the Command Line Developer Tools for Xcode will need to be installed. Essentially, these tools provide a bunch of build tools, compilers etc. that Homebrew will need. To install these, run:

xcode-select --install

Once that is done, install Homebrew by running the command on their homepage:

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

To verify if the Homebrew installed correctly, run:

brew doctor

Git

Although macOS comes with a pre-installed version of git, I recommend installing git via Homebrew. This allows for easy version upgrades in the future without messing with the system default version.

brew install git

Run the command below to verify that git installed and are now using the Homebrew installed git at /usr/local/bin/git:

which git

NOTE: it is a common pattern to install software that comes pre-installed with macOS via Homebrew to better manage your software versions.

My ~/.gitconfig is fairly minimal, however I do add some configuration to support a nicer git diff command using delta. I will talk about delta in more depth in the CLIs section.

zsh

It is also critical that the shell I'm using provides a great developer experience. After all, I do spend most of my day in the terminal, so I want a setup that provides efficiency and visual aesthetics. This is where zsh or 'Z shell' comes in.

For macOS v10+, zsh is the default shell. However, if for some reason it's not, install it by running:

brew install zsh

Whilst my ~/.zshrc contains a lot of things I've written myself, like aliases (future blog coming on this), I leave most of the management of the power user-related configuration to a framework called Oh My Zsh. Oh My Zsh, is an open source, community-driver framework that bootstraps a lot of great configuration and themes out of the box. Take a look at this cheatsheet to have a look at some of the aliases it ships with.

To install Oh My Zsh, run:

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

I use Powerlevel10k for my zsh theme. Not only does it provide a great looking theme with glyph support, but also comes with a user-friendly interactive prompt to help configure the theme. To install, run:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

After it has installed, enable the powerlevel10k theme in the ~/.zshrc file, by specifying ZSH_THEME="powerlevel10k/powerlevel10k".

Then ensure to install the recommended MesloLGS NerdFont. This font allows glyphs and symbols used by Powerlevel10k to render correctly in the terminal.

Once the font is installed and setup correctly, run the following command and follow the P10k prompts to select the desired appearance:

p10k configure

The terminal should now look nice and beautiful, and resemble something like the image below.

my terminal

Lastly, let's install some useful plugins that further extend zsh's capabilities:

cd ~/.oh-my-zsh/custom/plugins
git clone https://github.com/zsh-users/zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-syntax-zsh-autosuggestions

Then, in the ~/.zshrc, add the plugins:

# ~/.zshrc
...
plugins=(git colored-man-pages zsh-syntax-highlighting zsh-autosuggestions)
...

Source the ~/.zshrc file for the changes to take effect:

source ~/.zshrc

tmux

tmux is a terminal multiplexer, letting you switch between several programs and sessions within one terminal. It has a bit of a learning curve, but I can't imagine life without it. If you're a backend or cloud engineer who does a lot of ssh'in into servers, then it is definitely worth installing.

Install tmux by running:

brew install tmux

Then install the Tmux Plugin Manager to manage installing plugins for tmux:

git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm

Plugins can now easily be added into the ~/.tmux.conf file with the set -g @plugin '...' command. To install the plugin, simply just save the file and run the tmux prefix + I to fetch and install the plugin.

My ~/.tmux.conf contains all the configurations and plugins I use. The plugins and configuration are mostly based around the status bar and vim integration.

IDE - Neovim

Neovim is a modern fork of vim with a great community backing. It is a lot quicker than vim and also provides other advantages such as better configuration and now an inbuilt LSP.

# To install latest stable build
brew install neovim

# To install development version (v0.5 at time of writing)
brew install --HEAD luajit
brew install --HEAD neovim

At the time of writing, I'm still using CoC.vim for the language server and vscode-like snippets. But, I have intentions of migrating to the out of box LSP provided in neovim v0.5.

Install vim-plug to manage plugin installation:

sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \
       https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

Create a ~/.config/nvim/init.vim and a ~/.config/nvim/coc-settings.json file and copy across my init.vim and coc-settings.json.

CLIs

I'm a big fan of software that runs via the command line. These are the most common software's that I rely on for my daily workflow:

Docker - although Docker Desktop is technically a desktop app, I only use docker via the terminal.
aws cli and aws-vault. The aws-cli doesn't need much explanation, it is the gateway to calling AWS APIs. On the other hand, aws-vault makes it easy to securely store and access AWS credentials in a dev environment. It also makes it simple to switch between multiple IAM roles quickly.
nvm - Node version manager for managing multiple node version

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | zsh

Then add to the following to the ~/.zshrc file:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

NOTE: I'm currently looking into switching from nvm to volta

z - Tracks your most used directories, based on 'frecency'. After a short learning phase, z will take you to the most 'frecent' directory that matches ALL of the regexes given on the command line, in order:
- brew install z
bat - A cat clone with syntax highlighting and Git integration:
- brew install bat
delta - A viewer for git and diff output:
- brew install delta
broot - A new way to see and navigate directory trees:
- brew install broot
ripgrep - ripgrep recursively searches directories for a regex pattern while respecting your gitignore:
- brew install ripgrep
fzf - A general purpose command-line fuzzy finder:
- brew install fzf && $(brew --prefix)/opt/fzf/install
ranger - A VIM-inspired file manager for the console:
- brew install ranger
glances - Glances an Eye on your system. A top/htop alternative:
- brew install glances

Desktop Apps

Here are some useful desktop apps that I could not live without:

Alfred

The popular power user quick launch tool for macOS, allowing you to do almost anything on your mac via hotkeys. I'm a big fan of minimising mouse usage and improving efficiency where possible. Alfred lets me do just that.

Alfred screenshot