As Web Developers there's a responsibility we have to our machines. They keep us going throughout our daily routine and as such we need to ensure they're performing at optimal efficiency.

If you're anything like me then towards the end of the year your machine will be cluttered with folders upon folders of node_modules, more image uploads than you can comprehend and the odd sprinkle of SSL certificate requests. Every year my machine goes through the wars and as a thank you for it's hard work I like to treat it to a little facelift. It's time to conduct the yearly reformat.

This is the 3rd part of my 'setup' series of posts. Check out the others below:

Prerequisites

As this tutorial will focus on how to setup your development environment from scratch, you'll first need a fresh installation of the latest Operating System from Apple. At the time of this writing that's macOS 10.12.

Fig 1: A fresh install of macOS on a Retina MacBook Pro

Apple have a great tutorial on how to reinstall macOS on your machine with the option to erase your Mac and start from scratch. Whilst not necessary, I'd rather start from scratch and know exactly what's on my machine, but I'll leave that to your discretion.

Core applications

Before we do anything else, I like to start off with installing some core applications.

Configuring Sublime Text 3

Sublime is a great code editor out of the box but it's best feature is configurability. The first in this series of 'setup' posts explained how I go about customising Sublime Text 3 to my liking.

If Sublime is a code editor you use or something you're looking into then I'd suggest you give it a read, but hey, I may be biased.

Configuring your Command Line Interface

These days it's not enough to just have a Code Editor to do your job. With more and more projects requiring Command Line Interface for things like version control and build tools, it's almost become a requirement to use them on a daily basis, so it makes sense to spend time catering them to your needs.

As I've done with the Code editor, the second in this series of 'setup' posts explained how I configure my Command Line Interface by ditching the default terminal app, installing Zsh and then customising iTerm with plugins and themes.

Core software

In addition to applications, there are certain pieces of software that you'll more than likely require at some point in your development. This is of course, heavily dependant on the projects you work on, but nonetheless, I'd guess 95% of people reading this will need them at some point.

Xcode Command Line Tools

The Xcode Command Line Tools is a bundled package of different software that many other products use, for example [Git](Xcode Command Line Tools).

If you followed my installing Zsh and customising terminal post then you will already have Xcode Command Line Tools installed, if not, open up your Terminal prompt and within your home directory (cd ~) run the xcode-select installer.

$ xcode-select --install

Homebrew

Homebrew is a package manager for macOS which allows for a simple and maintainable installation of software so that it's much easier to update, change or delete in the future.

To give an example, let's say you use this to install Node and then an update for the package comes in. Now usually you'd have to go back through the full installation process for Node, however, with Homebrew we can simplify that process by running a single command, brew upgrade node. Homebrew will then handle the update process and ensure that any additional configuration is taken care of automatically.

It's gained a lot of popularity in the past few years and is now one of the largest Open Source repositories on Github. I'm sure you can see the appeal already.

Once installed, run brew doctor to check everything is setup correctly. I'd recommend taking a look at what Homebrew can offer over on their documentation.

Ruby Version Manager (RVM) & Ruby

Whilst macOS comes with it's own installation of Ruby, it's usally outdated. In addition, only having one version of Ruby on your Mac can create problems when you're working with an application which requires a lower or higher version.

Instead, we'll install the Ruby Version Manager (RVM) which will allow us to more easily manage multiple versions of the programming language at once, and switch between them at the drop of a command.

Now that RVM is installed, we can use it to get the latest version of Ruby. Replace the following with the version of Ruby you're looking to install, the latest of which can be determined on Ruby's downloads page. As of this writing that is 2.4.0.

$ rvm install 2.4.0
$ rvm --default use 2.4.0

Note: If you get an error saying that usr/local/bin is not writable, consider this Stack Overflow post.

You can confirm that you have the correct version of Ruby setup running by using the ruby -v command.

Node and Node Package Manager (NPM)

Node is another programming language that has risen in popularity in the past few years. Even if you're a Front-end Developer, the chances are you'll come in contact with some Node code (yeah it rhymes!) when using a build tool like Grunt or Gulp.

As I described in the Homebrew example above, rather than install Node and NPM through their own download scripts, we'll install them through Homebrew to ensure we can update and change our installations with ease in the future. These days, Node comes pre-bundled with NPM so all you need to do is run the command to install Node.

$ brew install node

You can then check Node and NPM are installed successfully...

$ node -v
$ npm -v

Local web servers

The next step is to create our own local development environment. As I predominantly work with Laravel and WordPress I'll stick to a LAMP stack for this tutorial, although I appreciate that's not going to cater to you MEAN stack users.

For a LAMP stack, there are many different options depending on the complexity you're looking for.

MAMP

MAMP is a great starter application for a beginner or someone who doesn't need a great deal of customisation or complexity. It comes with an intuative and surprising simple user interface from which to confirm your websites.

It's big sister, MAMP Pro provides the ability to edit your Virtual hosts (Vhosts) so that you can have pretty local domains such as website.dev instead of localhost:8000. Whilst it's a premium addition to the MAMP family, I'd definitely recommend the investment if you're looking for something quick and easy.

Do it yourself: LAMP Stack

As you might configure a server manually by installing PHP, MySQL and Apache, you can also create a local LAMP stack on your machine.

It's a little more 'do-it-yourself' in style, but it does provide a lot more flexibility in how you organise your development environment than MAMP, plus you can always use an open source application such as Dnsmasq to modify your Vhosts through a User Interface.

Personally, this is my go-to as I don't yetneed the more robust solutions below but it still provides me the flexibility I'm looking for that applications such as MAMP do not.

Docker

Docker is a relatively new kid on the block when it comes to local development, but one with a lot of promise. Originally created in 2013, it's primary use is for provisioning development environments for your servers, but has since started to be used for local development too.

It's definitely one to watch out for 2017. If you're looking to get ahead of the curve, then Master Zend Framework have a good tutorial on getting started.

Vagrant and Virtual Boxes

The most robust solution I know of would be to work with Vagrant and Virtual Box. At a top level, these two products allow you to create Virtual machines on your own physical one, whereby all your development environment can be stored on these, which you can turn on and off at the drop of a command, rather than always have them clutter up your Mac.

They're particularly useful when you have a large team of developers, as syncing up your VM boxes can ensure that everyone–including your live servers–have the same environment installed, decreasing the likelihood of any problems due to deprecated code or similar.

Project software

Moving onto project software is an unknown that very much depends on what you'll be working on, but here's a few products that may prove useful for your development

Bundler

Bundler is a package manager for Ruby, doing the same job for Ruby as NPM does for Node, it allows you to manage your Ruby packages, called 'gems'.

Now that we have Ruby installed, you can install Bundler using the gem command.

$ gem install bundler

For the curious, yes that means Bundler is a gem that allows you to manage other gems... very meta.

Grunt and/or Gulp

Next, if you're using a build tool for your project then you'll want to install those through NPM. Here's the install scripts for both Grunt and Gulp respectively.

$ npm install -g grunt-cli
$ npm install -g gulp

WP-CLI

Finally, if you're working with WordPress websites do yourself a favour and start using the WP-CLI, a command line interface for WordPress which provides a bunch of different commands to work with your WordPress websites, with the most useful being its ability to Search and Replace your database. Take a look at the list of available commands for further information.

Taking the time to configure my machine has allowed for a much more streamlined solution moving forward, I'd suggest you do the same. If you have any questions or problems on anything within this blog post then please mention them in the comments section below and I'll try my best to help.

Mic Sumner

Hey love this post, I come from reddit!
What's your real name to be honest with you I guess it's time for a human feature.
You are missing out on Local by Flywheel (previously Pressmatic). That will completely solve all your WordPress Dev on Mac problems.

Luke Whitehouse

Brooke Kuhlmann

In case it is of interest to anyone wanting to automate their macOS setup, you might find these macOS Config shells scripts of interest. The config project is tailored for my setup but can be forked and customized for personal setups. It's built on top of the macOS project.

Jayden

Personally, I'd recommend OneNote over Evernote anyday.

Also if you don't want to pay for divvy, you can download hammerspoon and use any config found online. (A buttload of configs here: https://github.com/Hammerspoon/hammerspoon/wiki/Sample-Configurations)

The advantage over this over divvy (besides cost) is you can setup your windows without having to use both mouse and keyboard at the same time.

So if you're typing you can press Ctrl + Option + -> to move and resize the window without having to move your hand to the mouse.

Or if you happen to be dragging files and folders around you can just drag a window to the screen edge or corner to make it fill up half or a quarter of the screen without moving your hand to the arrows.

Luke Whitehouse

Hey Jayden, thanks for this, theres some really great stuff in your comments. It sounds like I currently use Divvy in the same way you do with Hammerspoon except by the looks of things Hammerspoon has a hell of a lot more configuration, and it's free!

Currently I'm opting for a ⌘ + CTRL + 1/2/3/4 workflow for my screen layouts so that I can do it all on my hand, but I completely agree, a setup like this saves so much time! Thanks for sharing, I'm definitely going to give Hammerspoon a look over.