macOS development environment from scratch

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:

• Installing Zsh and customising Terminal (05/01/2017)
• Sublime Text 3 configuration (28/12/2016)

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.

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.

• Google Chrome as my browser of choice;
• Sublime Text 3 as my Code Editor of choice;
• and iTerm2 as my Terminal replacement.

Once installed, we can configure the latter two.

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.

Here's a quick list that I always install on my machine:

• Xcode Command Line Tools
• Homebrew
• Ruby Version Manager (RVM) & Ruby
• Node and Node Package Manager (NPM)

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.

You can install Homebrew by using their prebuilt Ruby script.

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

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.

To install, run the following commands in succession of one another.

$ gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3
$ \curl -sSL https://get.rvm.io | bash -s stable

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 yet need 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.

Back in 2014, Darren Beale wrote a good article for 24ways on "What is Vagrant and Why Should I Care?", it's worth a read. As a starter box, the tutorial website Scotch created the Scotch Box which comes equipped with a LAMP stack, it's a great starting point.

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.

You can download WP-CLI through a curl request.

$ curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Next we need to check if the downloaded file is working.

$ php wp-cli.phar --info

It will output something similar to the following depending on your system and current version:

PHP binary: /usr/local/Cellar/php56/5.6.20/bin/php
PHP version: 5.6.20
php.ini used: /usr/local/etc/php/5.6/php.ini
WP-CLI root dir: phar://wp-cli.phar
WP-CLI packages dir:
WP-CLI global config:
WP-CLI project config:
WP-CLI version: 0.25.0

That's is WP-CLI is not installed. However, at the moment the setup has a couple of problems:

1. It's cumbersome to use, as you have to reference php wp-cli.phar before any command;
2. You can only use it in the directory you downloaded it from.

To solve this, we can move the file into our /usr/local/bin directory and change the name of the file so that its easier to use.

$ chmod +x wp-cli.phar
$ sudo mv wp-cli.phar /usr/local/bin/wp

That should do it, check it's working by running wp --info in different directories on your Mac.

Other notable applications

Whilst we have installed our core applications, we still don't have the other applications which we may need in our day to day lives. This list will change from person to person, but here's mine:

• Evernote - As my go-to for note taking across all devices.
• Divvy - Window management, allowing you to bind key combinations together to change the position and size of opened applications. I don't think I could live without Divvy to be honest.
• ColorSnapper2 - My OS level color picker which allows you to choose the format for the colors, saving them to your clipboard.
• MacDown - Markdown editor for macOS. Yet to find a suitable replacement that works for all devices, I really wish Evernote had Markdown support.
• Flux - Takes the blue out of your screen depending on how dark the room is, which is much better for your eyes. It's what Night Shift was based off, give it a try.
• Postman - If you're looking to do any API development, this app is for you.
• Sequel Pro - MySQL User Interface, I'm not pro enough for the Command Line, and Sequel Pro is too, well, pro.

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.

Until next time 