Setting Up a Mac for Web Development

Follow along as I set up a macOS desktop from scratch. Development environments, apps, code editors, all the settings, and some useful shortcuts!

Initial OS Setup

When you get a new machine (or do a fresh OS install), there are always lots of little things to adjust to get things "just right". In this article, I'll attempt to document every step I take. Hopefully it will be helpful to readers (and my future self)!

Decluttering the Dock

First, we have some basic OS cleanup stuff. I like to keep things minimal, especially on the dock and desktop. To do this, simply click drag icons off the dock. You'll see them go "poof" when you let go of the click. After decluttering the dock, only running programs will show. Usually I set it to auto hide too. You can set this by right clicking on the dock (not an app, the divider) and going to "Dock Preferences". Now that we've cleaned up the dock, we need a way to easily launch programs so we'll install a launcher.

The Launcher & Dock Cleanup

Personally, I like to use Quicksilver, so we'll install that. Open up safari, download the app and install. Once installed, we'll drag the Quicksilver app to the dock and open it up for the first time. The default settings (and no plugins) usually work great. Once we're through the initial setup steps, open the Quicksilver preferences and check Start at Login under the Application settings. Now we can open any app or folder by hitting Ctrl + Space. Quicksilver also allows us to move, copy, and perform other file or system actions too, pretty slick! Next, we'll install some commonly used apps.

Installing Commonly Used Apps

This section will surely differ from person to person, here's what I typically install:

• BetterTouchTool well worth it, and supports an indie dev
  • A must for 4k monitor window snapping. Powerful keyboard shortcuts, basic window snapping, etc...
• Carbon Copy Cloner create bootable backups of your whole system
• Dropbox
• Flux This will change your life. Couldn't live without it.
• iTerm 2 Much better than the built in terminal
• Karabiner Elements remap modifier keys on a bluetooth keyboard
• Google Chrome
• MacPass for managing passwords
• Quicksilver we covered this above ^
• Sequel Pro best SQL program ever
• Sketch great for designing for the web
• Visual Studio Code I love this editor

From the App Store

• Garageband sometimes you just need to rock out
• Slack
• Window Tidy does a few things BetterTouchTool can't

This is the bare minimum for me. I'll try to update the list as I install more stuff. If you see an app missing from this list, please let me know in the comments! At this point I will typically copy over my bettertouchtool presets for hotkeys and to fix the behavior of the forward/back buttons on my Logitech mouse.

Homebrew

Next, we'll install Homebrew, so open up iTerm and paste this in:

1/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Go through the prompts, allow it to install the XCode command line tools, and we'll be set! We will be using various brew commands soon to configure our terminal and dev environment.

Pimping The Terminal

As developers, we spend tons of time in our terminal. So it makes sense to do some one-time setup to make it more visually pleasing (and informative). To improve the bash prompt, I like to use Powerline. I know this sounds weird but we need python for powerline. On modern systems this is really no big deal. Trust me, it's worth it!

Installing Powerline

• Install python 3 brew install python3
• Use pip (python package manager) to install powerline: pip3 install powerline-status
• Get the path where powerline is installed pip3 show powerline-status (copy this)

Now we need to configure bash to use powerline, so open up ~/.bash_profile vim or your text editor of choice.

1vim ~/.bash_profile
1vim ~/.bash_profile

Paste the following lines into the file. Note that you may need to change part of the last line to match your path.

1# Powerline
2powerline-daemon -q
3POWERLINE_BASH_CONTINUATION=1
4POWERLINE_BASH_SELECT=1
5source /usr/local/lib/python3.7/site-packages/powerline/bindings/bash/powerline.sh
1# Powerline
2powerline-daemon -q
3POWERLINE_BASH_CONTINUATION=1
4POWERLINE_BASH_SELECT=1
5source /usr/local/lib/python3.7/site-packages/powerline/bindings/bash/powerline.sh

Now we need to copy in the default powerline config:

1mkdir -p ~/.config/powerline
2cp -R /usr/local/lib/python3.7/site-packages/powerline/config_files/ ~/.config/powerline/
1mkdir -p ~/.config/powerline
2cp -R /usr/local/lib/python3.7/site-packages/powerline/config_files/ ~/.config/powerline/

Next, we need to choose a powerline font and tell iTerm to use it:

• Grab a font from the Powerline Fonts Repo (I use Source Code Pro)
  • Here's a direct link to the one I use
• When it downloads, open the font and click "Install Font" at the bottom right of the window.
• Open iTerm, and in Preferences under Profiles -> Text click "Change Font" and select the powerline font

Open a new iTerm window and you should see a snazzy powerline display! Feel free to customize things from here such as font size or default window behaviors of course.

Adding Git Status to Powerline

Powerline is great by default, but we can make it better by adding status display of git repos to the bash prompt. We'll use this powerline segment by Jasper Brouwer.

First, run this command to install the new segment, similar to how we installed Powerline:

1pip3 install powerline-gitstatus
1pip3 install powerline-gitstatus

Then add the following to your ~/.config/powerline/colorschemes/default.json under the groups object. For example:

 1{
 2  "groups": {
 3    "gitstatus": { "fg": "gray8", "bg": "gray2", "attrs": [] },
 4    "gitstatus_branch": { "fg": "gray8", "bg": "gray2", "attrs": [] },
 5    "gitstatus_branch_clean": { "fg": "green", "bg": "gray2", "attrs": [] },
 6    "gitstatus_branch_dirty": { "fg": "gray8", "bg": "gray2", "attrs": [] },
 7    "gitstatus_branch_detached": {
 8      "fg": "mediumpurple",
 9      "bg": "gray2",
10      "attrs": []
11    },
12    "gitstatus_tag": { "fg": "darkcyan", "bg": "gray2", "attrs": [] },
13    "gitstatus_behind": { "fg": "gray10", "bg": "gray2", "attrs": [] },
14    "gitstatus_ahead": { "fg": "gray10", "bg": "gray2", "attrs": [] },
15    "gitstatus_staged": { "fg": "green", "bg": "gray2", "attrs": [] },
16    "gitstatus_unmerged": { "fg": "brightred", "bg": "gray2", "attrs": [] },
17    "gitstatus_changed": { "fg": "mediumorange", "bg": "gray2", "attrs": [] },
18    "gitstatus_untracked": {
19      "fg": "brightestorange",
20      "bg": "gray2",
21      "attrs": []
22    },
23    "gitstatus_stashed": { "fg": "darkblue", "bg": "gray2", "attrs": [] },
24    "gitstatus:divider": { "fg": "gray8", "bg": "gray2", "attrs": [] }
25  }
26}
 1{
 2  "groups": {
 3    "gitstatus": { "fg": "gray8", "bg": "gray2", "attrs": [] },
 4    "gitstatus_branch": { "fg": "gray8", "bg": "gray2", "attrs": [] },
 5    "gitstatus_branch_clean": { "fg": "green", "bg": "gray2", "attrs": [] },
 6    "gitstatus_branch_dirty": { "fg": "gray8", "bg": "gray2", "attrs": [] },
 7    "gitstatus_branch_detached": {
 8      "fg": "mediumpurple",
 9      "bg": "gray2",
10      "attrs": []
11    },
12    "gitstatus_tag": { "fg": "darkcyan", "bg": "gray2", "attrs": [] },
13    "gitstatus_behind": { "fg": "gray10", "bg": "gray2", "attrs": [] },
14    "gitstatus_ahead": { "fg": "gray10", "bg": "gray2", "attrs": [] },
15    "gitstatus_staged": { "fg": "green", "bg": "gray2", "attrs": [] },
16    "gitstatus_unmerged": { "fg": "brightred", "bg": "gray2", "attrs": [] },
17    "gitstatus_changed": { "fg": "mediumorange", "bg": "gray2", "attrs": [] },
18    "gitstatus_untracked": {
19      "fg": "brightestorange",
20      "bg": "gray2",
21      "attrs": []
22    },
23    "gitstatus_stashed": { "fg": "darkblue", "bg": "gray2", "attrs": [] },
24    "gitstatus:divider": { "fg": "gray8", "bg": "gray2", "attrs": [] }
25  }
26}

Finally, add this segment to powerline's config in ~/.config/powerline/themes/shell/default.json:

1{
2  "function": "powerline_gitstatus.gitstatus",
3  "priority": 40
4}
1{
2  "function": "powerline_gitstatus.gitstatus",
3  "priority": 40
4}

Add the above config to the "left" option in the default.json file. I also ended up removing the "right" section entirely. Feel free to do that too!

Once we've done that, we just need to run this command to reload powerline

1powerline-daemon --replace
1powerline-daemon --replace

Enjoy your fancy new git-repo-status aware terminal!

Configuring Bash & Installing Git

Now that we've got the powerline stuff done, we'll add a few bash aliases and shortcuts to make working with git and Laravel easier.

First, install git and bash completion using homebrew:

1brew install git bash-completion
1brew install git bash-completion

Although I'm constantly tweaking things, my .bash_profile is always available here. Use that as a starting point for your own bash config. Feel free to ask me questions in the comments or on twitter if you want to know how anything in there works!

Now we'll just paste in the file from that gist ^.

Really, that's about all we should need to do to set up bash how we like it. From there it all comes down to personal taste for Powerline settings and iTerm stuff.

Customizing Vim

We've setup bash how we like it, but now we need to set up Vim. Like the .bash_profile gist, I've always got my .vimrc available on github

Vim config is also a personal thing, but you can at least use my version as a starting point for your own.

If you directly copy my .vimrc file, you'll need to install the theme I use: xoria256. You can download this file and place it at ~/.vim/colors/xoria256.vim. Note that you may need to create the ~/.vim/colors directories first.

Development Environment

Finally it's time to set up our development environment. For me, this usually means "web dev" first and foremost. The simplest thing I've found to accomplish this is Laravel Valet. I won't cover everything here, but I'm always happy to answer questions on twitter.

Installing Laravel Valet

For this section I recommend following the Laravel Valet docs, since they describe it in great detail.

Once valet is installed, we are almost be ready to develop our next great web app! The only thing left to do is to configure the editor, which is Visual Studio Code in my case.

Mysql
After you've installed MySQL (as outlined in the Valet docs), pay attention to the output of the brew install mysql@5.7 command. We want this to start at login, so make sure to run brew services start mysql@5.7.

Installing Node / NPM

This part's easy! Head over to https://nodejs.org/ and download the installer. Usually I choose the current version.

Configuring VSCode

Some folks prefer other editors and there's nothing wrong with that... but I love VSCode. It is open source, has an active community, and the intellisense it provides is miles ahead of anything else I've used. We installed it earlier, but now is the time to configure it to our liking.

For First Timers
If you're not used to VSCode, I recommend you start with the vanilla editor and add extensions and settings as you need to. I've been using it for a while, so my needs may differ from yours quite a bit!

Thanks to the Settings Sync extension, this part of the process is fairly automated. All we need to do is install the extension and configure the github gist ID that contains my (previously synced) settings.

Click on the extensions button on the left sidebar (or press Cmd + Shift + X) and search for "Settings Sync". Once installed, press Shift + Option (Alt) + D. Now you'll need to create a new personal access token for Github. The only checkbox you should need to enable is the one referring to "Gist" access. Paste your generated access token into the box in VSCode.

If you want to use my settings, paste my gist ID in the next box which pops up asking for a Gist ID, otherwise hit Enter to create a new settings gist of your own
Here's the gist ID:

136dedc27c2c91cf9498e89012fae3e8b
136dedc27c2c91cf9498e89012fae3e8b

VSCode comes with a code terminal command. Open the editor, hit Cmd + Shift + P and search for Shell Command: Install 'code' command in PATH -- that's the one you want.

Wrapping Up

Whew! If you've made it this far, I have to commend you. Thanks for reading, now go create something great!