Web Developing in OS X Mavericks

Setting up a solid development environment and best practices are essential in being a quality web developer. It also helps save time in the long run and makes managing multiple projects more sensible and logical. I try to handle personal projects as well as client projects in a similar fashion to how we deployed projects at the companies I’ve had the privilege of working for.

For me, that meant having a local Apache-PHP-MySQL environment on my laptop, so I could code even while I’m on the road with a shoddy internet connection. When I developed in a Windows OS, I usually just downloaded XAMPP and moved on, but since OS X already has Apache and PHP installed by default, I figured I would document the process for getting myself up and running in OS X, should I ever feel the need to do a clean install and start over.

Apache

Setting up Apache is pretty easy with OS X, since it comes preinstalled by default. All you have to do is start it. Since Apple removed the option from System Preferences, this can be accomplished through Terminal.

sudo apachectl start

Going to http://localhost in your web browser should yield Apache’s initial “It works!” page, which is located in /Library/Webserver/Documents.

PHP

Initially, Apache is not set up to process PHP code, but it is pre-installed with the OS. Therefore, we will need to enable it by uncommenting a line of code in one of Apache’s configuration files, again through Terminal.

sudo nano /etc/apache2/httpd.conf

When you’re in the text editor, locate the following line and uncomment it by removing the # at the start of the line, so it reads:

LoadModule php5_module libexec/apache2/libphp5.so

Once this is saved, Apache will need to be restarted in order for the updated configuration file to take effect.

sudo apachectl graceful

A good way to test this is to create a PHP info file in the Documents root, i.e. info.php, and run it in a web browser from http://localhost/info.php.

info.php

<?php phpinfo( ); ?>

MySQL

If the site requires a database, one of the more common choices is MySQL. Unfortunately, OS X does not come preinstalled with MySQL, so it must be installed manually. As an open source software, it is available online for free on MySQL’s downloads website, under the title MySQL Community Server. Be sure to select the appropriate DMG download based on the architecture of the computer’s hardware (either 64-bit or 32-bit).

Once downloaded, mount the DMG and install the package for MySQL, optionally installing the package for starting MySQL on boot and the package for managing the MySQL status from the System Preferences. Starting MySQL from System Preferences is as easy as clicking a Start button.

Virtual Hosts (Multiple Websites)

I typically have multiple websites to deal with at any given time and, thus, I need to set up virtual hosts, or “custom URLs”, for organizing my sites. To do this, the Virtual Hosts configuration needs to be included in Apache. As was done with PHP, edit the httpd.conf file, this time locating the commented Virtual Hosts line, so that it reads:

# Virtual hosts

Include /private/etc/apache2/extra/httpd-vhosts.conf

Now, we add our hosts to the httpd-vhosts.conf file located in the described directory. There is an example host in the aforementioned file, but here is an example, anyway:

<VirtualHost *:80>
	DocumentRoot "/usr/docs/www.example.dev"
	ServerName www.example.dev
	ErrorLog "/private/var/log/apache2/www.example.dev-error_log"
	CustomLog "/private/var/log/apache2/www.example.dev-access_log" common
</VirtualHost>

Adding multiple Virtual Hosts enables Apache to route requests from custom domains, such as www.example.dev. However, the local hosts file also needs to be updated in order to direct web browsers to Apache when using these custom domains.

sudo nano /etc/hosts

In the local hosts file, simply add a line for each custom domain so that it routes back to the local machine (127.0.0.1).

127.0.0.1   www.example.dev

Finally, restart Apache in order for the changes to take effect.

sudo apachectl graceful

Now, going to http://www.example.dev in the web browser should display the contents of the directory associated with it (in the example, /usr/docs/www.example.dev), allowing for multiple local development environments.

Leave a Reply

Your email address will not be published. Required fields are marked *