Host multiple subdomains on Mac OSX

I just a bought a new iMac a few weeks ago. Determined to improve my workflow as much as possible I decided to do something about an old annoyance.

As a web developer I have dozens of website living in my “Sites” folder on Mac OSX 10.6. Each time I wanted to access a website on “localhost” I had to open up my httpd.conf file and uncomment two lines related to the site I wanted to work on.

1
DocumentRoot "/Users/Milkman/Sites/wordpress"

and

1
<Directory "/Users/Milkman/Sites/wordpress">

This is okay, as long as you’re only working on one site at a time. But recently I found myself working on four sites at the same time. I needed a better solution.

I wanted to have several subdomains that I could set up and bookmark for easy access to all my sites in progress. Like so:

1
2
3
4
wordpress.localhost
phpmyadmin.localhost
client1.localhost
client2.localhost

If you’re reading this, you probably just want to know how it’s done. Here you go:

Step 1: Edit your httpd.conf file.

(You’ll need a text editor that can open hidden files. I use BBEdit.)

Add some “Virtual Hosts” to your httpd.conf file (located in /private/etc/apache2) below the settings for the document root (right after the last occurrence of “” around line 224).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# Virtual Hosts
# Note: You also need to edit the hosts file /private/etc/hosts
NameVirtualHost *:80
#WORDPRESS: wordpress.localhost
<VirtualHost *:80>
ServerAdmin blah@techism.com
DocumentRoot "/Users/Milkman/Sites/wordpress"
<Directory "/Users/Milkman/Sites/wordpress">
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>
ServerName wordpress.localhost
ErrorLog "/private/var/log/apache2/wordpress.localhost-error_log"
CustomLog "/private/var/log/apache2/wordpress.localhost-access_log" common
</VirtualHost>
<p>#phpMyAdmin: phpmyadmin.localhost
<VirtualHost *:80>
ServerAdmin blah@techism.com
DocumentRoot "/Users/Milkman/Sites/phpMyAdmin"
ServerName phpmyadmin.localhost
ErrorLog "/private/var/log/apache2/phpmyadmin.localhost-error_log"
CustomLog "/private/var/log/apache2/phpmyadmin.localhost-access_log" common
</VirtualHost>
<p>#CLIENT1: client1.localhost
<VirtualHost *:80>
ServerAdmin blah@techism.com
DocumentRoot "/Users/Milkman/Sites/client1"
ServerName client1.localhost
ErrorLog "/private/var/log/apache2/client1.localhost-error_log"
CustomLog "/private/var/log/apache2/client1.localhost-access_log" common
</VirtualHost>
<p>#CLIENT2: client2.localhost
<VirtualHost *:80>
ServerAdmin blah@techism.com
DocumentRoot "/Users/Milkman/Sites/client2"
ServerName client2.localhost
ErrorLog "/private/var/log/apache2/client2.localhost-error_log"
CustomLog "/private/var/log/apache2/client2.localhost-access_log" common
</VirtualHost>

Obviously, you’ll want to change the paths to wherever your sites live. You can make as many virtual hosts as you like. You’ll notice my wordpress configuration (the first virtual host) has some extra stuff in between a tag. This allows you to override the default security options.

1
2
3
4
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all

That basically tells apache that any .htaccess files inside the WordPress site take priority over any other rules set in parent directories.

Step 3: Edit your hosts file

Edit your “hosts” file (located at /private/etc/hosts). You’ll want one subdomain for each virtual host you configured in your httpd.conf file. Make sure the subdomains in your hosts file match ServerName in the virtual hosts defined in your httpd.conf file. Here’s the full content of my hosts file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
127.0.0.1 thermalexposure.localhost
127.0.0.1 wordpress.localhost
127.0.0.1 phpmyadmin.localhost
127.0.0.1 client1.localhost
127.0.0.1 client2.localhost
255.255.255.255 broadcasthost
::1 localhost
fe80::1%lo0 localhost

Step 4: Restart Your Web Server

Go to System Preferences -> Sharing and toggle “Web Sharing” off and back on again. This will reload your new server configuration file. You should be able to browse to each of your new domains.

Toggle Web Sharing off and on again.

Toggle Web Sharing off and on again.

You may want to check out this article that shows you how to use the .new extension instead of .localhost.

This entry was posted in Techno-babble. Bookmark the permalink.