My lovely Mac OS X web-development environment

How to

A few months ago I bought a new Macbook. I’m really fond of the development environment I set up on it. The more I work with it, the more I love it. However, while building the environment I couldn’t find any decent step-by-step manual. So, it took me for a while to get what I wanted. Here’s my experience.

Mac OS X web-development environment

Front-end environment

For the beginning we need a package manager. Here arises the first question: which manager is the best to use Homebrew, MacPorts, Fink or Rudix? I worked with the first two and found out that a need both. Sometimes you can find the latest version of particular software on the ports (e.g. svn), sometimes with brew (e.g. rhino). In any case you’ll need to install Xcode (at least Command Line Tools for Xcode).

For macports we just download the package and install it. Homebrew can be installed by the following terminal command:

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

If you happened to be not familiar with package managers, that’s nothing to worry about. They are pretty easy in use. You just need to type in the terminal window manager name, command (can be install, uninstall, load, unload, search, update, upgrade and others) and package name (can be with version number) :

brew install rhino

After getting package manager installed, we can take care of dot-files. Under OS X you can share the files (dot-files or hidden files) in which the commonly used utilities keep user preferences data. It got trendy among developers to share their dot-files. After Addy Osmani’s presentation at Fronteers 2012 I chose his set. In additions, it contains a nice shell-script, which installs a bunch of useful tools:

  • git-friendly - A collection of shell scripts for making pulling, branching, and merging with git fast and painless.
  • rvm - RVM is a command-line tool which allows you to easily install, manage, and work with multiple ruby environments from interpreters to sets of gems.
  • nave - Virtual Environments for Node
  • Z - Tracks your most used directories
  • Dropbox command-line interface

However, before running the script you rather install NodeJs:

sudo port install nodejs

NodeJs built-in package manager is used within this install-deps.sh script.

As we have NodeJs, we can install TypeScript compiler

npm install -g typescript

Now let’s install an accessible from command-line JavaScript engine. Apparently Mozilla Rhino is the most likely choice:

brew install rhino

As for me, I prefer PhantomJS:

brew install phantomjs

If you are using building scripts on your projects, I would strongly recommend H5Boilerplate Ant Build Script. Apache Ant is already available in OS X. So you can just adjust script configuration and simply run it. Moreover, the package contains a set of useful utilities such as CSS Lint, JS-Lint, JS-Hint adapted for Rhino, image optimizers, JS compressor and so on.

Being a web-developer you’re likely to use version control software. SVN can be installed by the command:

port install subversion

the same way Git:

port install git

Back-end environment

In Mountain Lion (OS X, 10.8.x) the “Web Sharing” option removed from System Preferences. Apache and PHP are still included with the operating system and can be enabled. See details Start an Apache Web Server in Mac OS X Mountain Lion and How to Enable PHP in Apache for Mac OS X Mountain Lion.

I prefer install and update packages via package manager. So, here below, I’ll show how to install and configure Apache/PHP/MySQL using macports. If you prefer homebrew, you may find useful this article http://echodittolabs.org/blog/2011/09/os-x-107-lion-development-native-apache-php-homebrew-mysql-or-mariadb

Apache

To install Apache you type in Terminal following command:

sudo port install apache2

After installation is complete we can load Apache

sudo port load apache2

Now let’s check if it’s really working. We need to request in a browser the address http://localhost/ and see “It works!”.

Here some commands you will need to know regarding Apache:

sudo /opt/local/apache2/bin/apachectl -k restart # restart Apache
sudo port load apache2 # load Apache
sudo port unload apache2 # unload Apache

We’ll see for Apache configuration later in this article.

PHP

PHP can be installed like this:

sudo port install php5 +apache2
sudo port install php5-mysql

MySQL

Here the command to install MySQL Server:

sudo port install mysql5-server

As it’s ready we set up DB:

sudo -u mysql mysql_install_db5
sudo chown -R mysql:mysql /opt/local/var/db/mysql5/
sudo chown -R mysql:mysql /opt/local/var/run/mysql5/
sudo chown -R mysql:mysql /opt/local/var/log/mysql5/

Let’s now load MySQL:

sudo port load mysql5-server

Assign the password for root user:

$ mysqladmin5 -uroot password your-password

At this point we can check if the MySQL really works. We enter the server:

$ mysql5 -uroot -pyour-password

If there are no errors, we see MySQL welcome message. To leave MySQL CLI we type:

mysql> exit;

Apache Configuration

To register PHP module we run following commands:

cd /opt/local/apache2/modules
sudo /opt/local/apache2/bin/apxs -a -e -n "php5" libphp5.so

Now we add to the DirectoryIndex Apache configuration file (/opt/local/apache2/conf/httpd.conf) index.php:

<IfModule dir_module>     
   DirectoryIndex index.php index.html 
</IfModule>

At the end of httpd.conf we add AddType configuration:

# Include PHP configurations
Include conf/extra/mod_php.conf

PHP Configuration

First, we make php configuration file by copying default one:

$ cd /opt/local/etc/php5
$ sudo cp php.ini-development php.ini

In the file php.ini we edit following lines:

date.timezone = Europe/Berlin 
pdo_mysql.default_socket = /tmp/mysqld.sock
mysql.default_socket = /tmp/mysqld.sock
mysqli.default_socket = /tmp/mysqld.sock

Additional PHP modules

We can see what modules available on ports like that:

sudo port search <port-name>

Here the commands to install some useful modules:

# MCrypt
sudo port install php5-mcrypt
# ImageMagick library and imagick module:
sudo port install ImageMagick
sudo port install php5-imagick
# GD library
sudo port install php5-gd
# APC
sudo port install php5-apc
# SOAP
sudo port install php5-soap
#Xdebug
sudo port install php5-xdebug

Switching to a new PHP version

First let’s install PHP and extensions for the version (e.g. 5.4)

sudo port install php54 php54-apache2handler
cd /opt/local/apache2/modules
sudo /opt/local/apache2/bin/apxs -a -e -n php5 mod_php54.so
// install extensions, e.g.
sudo port install php5-xhprof

Remove from /opt/local/apache2/conf/httpd.conf the old Apache handler - mod_php5 and we can switch

sudo port select php php54

Installation of PEAR

http://jason.pureconcepts.net/2012/10/install-pear-pecl-mac-os-x/

Automated host configuration

Rob Allen has been quite comprehensive in his post Automatic Apache vhosts. If briefly, we just add at the bottom of /opt/local/apache2/conf/httpd.conf the following code:

<Virtualhost *:80>
    VirtualDocumentRoot "/Users/yourname/Sites/dev/%1/wwwroot"
    ServerName vhosts.dev
    ServerAlias *.dev
    UseCanonicalName Off
    LogFormat "%V %h %l %u %t \"%r\" %s %b" vcommon
    ErrorLog "/Users/yourname/Sites/dev/vhosts-error_log"
    <Directory "/Users/yourname Sites/dev/*">
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</Virtualhost>

This way we map any folder of /Users/yourname/Sites/dev to the host http://folder-name.dev. Public files exposed by the host are located in wwwroot subfolder.

For the local DNS server we can user dnsmasq.

sudo port install dnsmasq

Next, we edit /opt/local/etc/dnsmasq.conf file and added the following lines to the bottom:

listen-address=127.0.0.1
address=/.dev/127.0.0.1

Now we enter OS X System Preferences -> Network -> {Wifi or Ethernet} -> Advanced… -> DNS and click on button at the bottom of the left hand panel and add 127.0.0.1 to the list of DNS servers. Drag 127.0.0.1 at the top of the list.

Miscellaneous

Installing LESS

npm install -g less

When I decided I need Jekyll to compile my Markdown (kramdown) sources into fancy HTML, it took me for a while to get it on MacOS

sudo gem update --system
sudo port install apple-gcc42
sudo ln -s /usr/local/bin/gcc-4.2 /usr/bin/gcc-4.2
gem install --source http://rubygems.org jekyll