Setting up Mac OS X for Web Development (Part 1: Homebrew, Node, PHP and Sublime Text)

It doesn’t really matter what tools you use to develop as long as you learn to use them as fast and efficiently as possible. In this post I will share my Mac OS X setup for PHP/HTML, LESS and JavaScript development.

In Part 1 of the article, I’ll show you how to set up the base of your development environment; in Part 2, I’ll help you configure Sublime Text to actually use it.

Goals

When I was setting up my development environment, I had four goals in mind:

  1. I didn’t want different development and production environments, so that I wouldn’t need to remember to minify, link to different external resources or configure extra stuff whenever I publish a project.
  2. Everything had to happen “behind the scenes” when I saved my file. I didn’t want to deal with compiling, minifying or looking for bugs separately.
  3. I wanted to leave my text editor as little as possible. Let’s be honest, cmd+tab to browser and cmd+R are things of the past. We have live reloading now.
  4. Before this setup, I was using Codekit (which I strongly recommend if you don’t want to go through the trouble of setting up Sublime Text to compile LESS and JavaScript). My new setup had to be better in every way.

Requirements

Before we begin, I would strongly recommend you look into using Terminal. Get familiar with even the most basic commands like navigating directories and making/copying/moving files, and you’ll already increase your development speed. Once you’ve done that, you’re ready for Homebrew.

Homebrew

Homebrew is one of the best package management systems for Mac OS X; we’ll use it to install and maintain MySQL and Node.js.

Go to the Homebrew website and follow the installation instructions at the bottom of the page.

Node

To compile JavaScript and LESS, you will need to install tools through npm, a node package manager. So after you’ve installed Homebrew, go ahead and install Node and npm with the following command:

brew install node

MySQL

If you’re planning to use a database in your websites/web apps or if you’re using a CMS like WordPress, I recommend that you also use Homebrew to install MySQL. There are other ways to install MySQL, but this is by far the most convenient way I’ve come across. Plus, everything is in one place and easy to maintain. You can skip this step if you don’t need a database or if you’re using another database system.

brew install mysql

Follow the instructions that are printed out in Terminal once MySQL is installed, and make sure to change your root password to avoid security issues.

One problem is that PHP, which you will enable later, will not be able to find MySQL where it is now, and it’s essential for those two to get along. Let’s help PHP a little.

Create a MySQL config file in /etc/ called my.cnf and add the following contents:

[client]
socket = /var/mysql/mysql.sock
 
[mysqld]
socket = /var/mysql/mysql.sock

Now all we need to do is symlink the MySQL socket in this directory so that PHP can use it.

Create the directory if it doesn’t exist yet with

sudo mkdir /var/mysql/

and symlink the socket here:

sudo ln -s /tmp/mysql.sock /var/mysql/mysql.sock

That’s it. Let’s move on.

Sublime Text

Time to install your new favourite text editor if you haven’t already done so. Just go to the Sublime Text website and install the app by downloading it and moving it into your Applications folder.

If you’re going to use Terminal in the future, here’s a handy alias to open a file or a project directory in Sublime Text right from within Terminal:

alias sub="/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl"

A solid base

Now that you’ve installed all of the necessary software, you’re ready to enable PHP and Apache to run your websites. You might not realize it, but both Apache and PHP come with your computer and just need to be enabled.

Apache and PHP

To enable PHP on your system, all you need to do is uncomment a line in Apache’s config file. Open up the config file in Sublime Text with this command:

sub /etc/apache2/httpd.conf

Now find this line:

#LoadModule php5_module libexec/apache2/libphp5.so

Uncomment it by removing the leading hashtag(#), this will make Apache use the php module next time it starts.

Now we need to give PHP a settings file of its own. Your install of PHP comes with a default settings file that’s ready to use. All we need to do is make a copy of it with the correct name so that PHP is able to find it.

sudo cp /etc/php.ini.default /etc/php.ini

Local test domains

It’s totally possible to run a website on your computer at this point, but the problem is that you would have to work in /Library/WebServer/Documents/ and visit your website via http://localhost/. I think you’ll agree that it would be nicer if you could visit your projects via a nicer URL and not have to replace the files in that folder when you have multiple projects on the go.

I’m going to show you how to configure virtual hosts so that you can keep your projects in the same directory and access them via a different URL.

First of all, you need to make an entry for your new local domain in your machine’s hosts file. This is your computer’s own DNS and is checked first for matches every time your computer makes an outgoing request. By adding your new domain here, your computer will ask its own Apache for a site with that name instead of looking for it on the internet. Open your hosts file in Sublime Text with the following command:

sub /etc/hosts

and add the following line to the bottom of the file:

127.0.0.1      mylocalwebsite.dev

Now that your browser will ask your local Apache for this domain, we need to tell Apache where to look for the files it needs to serve it. Apache keeps the config files for its domains in the /etc/apache2/users/ folder. All files in here are parsed when Apache starts. You could just put all of your configurations in one file, but I made separate files for every virtual host to keep things clean.

Apache 2.4.3 and above (which comes with OS X 10.10 Yosemite) no longer automatically reads files in /etc/apache2/users. To re-enable this behaviour, I added the following line of code to the /etc/apache2/httpd.conf file:

Include /private/etc/apache2/users/*.conf

Start by making a file called localhost.conf in this directory to set some defaults then enable virtual hosts by writing this into the file:

<directory "/Users/[your_profile_name]/Sites/*/">
    Options Indexes MultiViews FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</directory>

NameVirtualHost *:80

Add the following line under Allow from all to account for a new security feature that was added in Apache 2.4.3 and above (which comes with OS X 10.10 Yosemite).

Require all granted

Make sure to replace [your_profile_name] with your actual profile name (the name of your home folder).

The only thing that’s left to do is to make a config file specific to your freshly made local dev domain. Make a new file called mylocalwebsite.conf (the name doesn’t matter, just make sure that you know which file belongs to which domain) in the same directory. Write the following lines to that file:

<VirtualHost *:80>
	DocumentRoot /Users/[your_profile_name]/Sites/mylocalwebsite.dev
	ServerName mylocalwebsite.dev
	ServerAlias www.mylocalwebsite.dev
	ServerSignature Off
</VirtualHost>

This will tell Apache to serve up the contents of ~/sites/[your_profile_name]/mylocalwebsite.dev whenever a request is made to mylocalwebsite.dev.

All you need to do now is make the website directory and test your setup. To do so, create the ~/sites/[your_profile_name]/mylocalwebsite.dev directory (you will probably have to create the “Sites” folder in your home directory too) and create an index.php page with the following contents:

<?php phpinfo(); ?>

Now restart Apache so that all the configurations we made will take effect.

sudo apachectl restart

Visit “http://mylocalwebsite.dev” in a web browser to see the result. You are now running a PHP website on its own virtual host on your machine.

All done

I have a little shell script that makes a new virtual host, sets up a new database, creates a new directory and installs WordPress into it. All I have to do is run the script and enter a name for the new project, and 20 seconds later, everything is ready to start developing.

I have also set up four pre-made virtual hosts (lab1.dev, lab2.dev, lab3.dev and lab4.dev) for odd projects or for trying out something new. I can either just copy a new anvil into my Sites directory with one of those names or symlink another directory into my Sites directory to pick up where I left off.

I hope you can see how fast this way of developing can be. Don’t hesitate to contact me via Twitter or e-mail if you run into trouble.

In Part 2 of this article I’ll show you how to configure Sublime Text to speed up your development even more. Stay tuned.