Setting up subdomains for your MAMP powered development environment

Setting up subdomains for your MAMP powered development environment

While working on a project I found the need to create subdomains on my local server to shorten the localhost URL and test some of the core features I was in the process of developing. After scouring the internet for quite some time and getting conflicting tips/tricks I finally got everything configured. However for my own future use and anyone else interested I figured i’d write a quick little post about the process.

For those unfamiliar with what MAMP is, you can check it out here.

As the title states this guide is for MAMP installations however most of the information can be re-used for other systems.

Editing the /etc/host file

Start by editing the host file, located in the root of your computer. You cannot see this file in Finder due to it being hidden (though PathFinder can) so open Terminal (/Applications/Utilities/Terminal) and type the following command

sudo vi /etc/hosts

The sudo command will require you to enter your password, and assumes temporary or “sudo” root for this task.

Note: If you use TextMate you could replace the “vi” portion with “mate” and it will open the host file inside TextMate for much quicker editing. Though you will be required to enter your password to save your changes.

Once you enter your password  you’ll be presented with a text editor. Type “i” to be able to edit the file, navigate (with arrow keys) to the 127.0.0.1 localhost line and replace it with:

127.0.0.1 localhost mysite.localhost.com

Replace mysite with your desired subdomain. Then save the file by hitting ESC and typing SHIFT+: then type “wq” and hit ENTER. This will write the file to disk and close the file.

Editing the Apache configuration

Now that the host file has been configured we need to set up the Apache portion. If you typed “mysite.localhost.com” in your web browser it’d either show a “server not found” error or display the default MAMP directory. We obviously want to display the new location, whether it be a new directory or a completely different location on your local web server.

Open Finder and navigate to the MAMP installation directory to locate the httpd.conf configuration file. The full path (default) is:

/Applications/MAMP/conf/apache/httpd.conf

Open the httpd.conf file and scroll all the way to the bottom. You should see a note about Virtual Hosts, such as:

### Section 3: Virtual Hosts
## VirtualHost: If you want to maintain multiple domains/hostnames on your# machine you can setup VirtualHost containers for them. Most configurations# use only name-based virtual hosts so the server doesn’t need to worry about# IP addresses. This is indicated by the asterisks in the directives below.

Add the following line of code, which enables name based virtual host mapping.

NameVirtualHost 127.0.0.1:80

After that add the following block of code. Which configures the path to your virtual hosts. The first block of code always has to be your default since Apache routes linear, which you may be familiar with using ModRewrite.

<VirtualHost 127.0.0.1:80>
ServerName localhost
DocumentRoot /Library/WebServer/Documents
</VirtualHost>


Then add the block for your new subdomain.

<VirtualHost 127.0.0.1:80>
ServerName mysite.localhost.com
DocumentRoot /Library/WebServer/Documents/mysite
</VirtualHost>

Now restart MAMP (either by opening/closing the app OR opening and closing the preferences panel) for your changes to take effect. Now when you type in “mysite.localhost.com” in your web browser you should see your new directory (or 404 if you haven’t actually created the directory yet).

Update: For those not using MAMP you just need to edit the httpd.conf file located wherever you installed Apache. Then just use the command line to restart Apache. If you’re scared of the command line you can also restart your entire computer, though that may take upwards of 3-10 minutes depending on your setup.

Thats all. To recap we edited the /host file and httpd.conf configuration file to enable subdomains on a development server to more closely resemble the live environment (which is always the goal).