This is a quick gist for setting up simple Virtual Hosts with MAMP

mamp-virtualhosts.md

Setting Up MAMP to have Virtual Hosts.

• This will work with MAMP 2.1.1 on OSX Mountain Lion, no guarantee otherwise.
• Virtual Hosts allow you to use readable URLs in your address bar to point to your local web projects instead of having to type "localhost:8888", etc.

Setting Up Mamp Application

1. Install MAMP mamp.info
2. Launch Mamp & click on Preferences
3. Click the Ports tab and click the Set to default Apache and MySQL ports button.

• This will set your Apache Port to 80 and your MySQL Port to 3306

4. Click the Apache tab to setup your Document Root

• This will be where you are storing your websites. Though you don't necessarily have to put your sites in the folder specified (or the one you specifify) - you'll run into modrewrite issues with .htaccess files if you don't - and you'll have to manually modify apache.
• In the long run, if you can help it, just set your Document Root to a specific folder, and keep all of your site folders within that directory.
• I personally have a folder in my home directory called code that I put all my development projects in.
  • The directory location ends up being: /Users/{username}/code, specifically in my case: /Users/watts/code
    • remember this for later!

Modifying Apache to work with Virtual Hosts

1. Find the MAMP folder in your Applications directory on your Mac. (/Applications/MAMP)
2. Follow the folders: conf -> apache

• You can also paste these commands into your Terminal application (found in Applications/Utilities), pressing return after each (this will open that directory in Finder)
  • cd /Applications/MAMP/conf/apache
  • open .

3. In the apache folder, you'll see the file called httpd.conf
   • First, create a backup of the file called httpd.conf.bak
   • Next, open the original in a text editor
     • For a text editor, Sublime Text 2 is nice, but if you need something easy and free, check out TextWrangler.

• Find the line (around line 524) that has: # Virtual hosts

• The line directly under it should say:

  • # Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
  • the line starts with #, meaning it is commented out -> Apache won't read it.
  • remove the '#' from that line to uncomment it so that Apache will now recognize the httpd-vhosts.conf file.

• save and close that file.

Adding A Virtual Host

• Before adding a virtual host, make a folder where you want your site code to be in your MAMP Document Root
• In my case, for making a website called newsite - I would add a folder called newsite inside of /Users/{username}/code/

1. In the apache folder, you'll see another folder called extra, open it.

• Inside this folder, there will be a file called httpd-vhosts.conf
• Create a backup of this file in the same fashion as before.
• Open the original in your text editor.
• You'll see a few examples - but they have some content that isn't necessary for a simple setup.
• This is where you add your sites to be virtual hosts.

2. Add the code below to the bottom of the file, substituting the necessary information for your own:

<VirtualHost *:80>
    DocumentRoot "/Users/watts/code/newsite"
    ServerName   newsite.local
</VirtualHost>

• The DocumentRoot is the directory of the website you are adding a Virtual Host for.
• The ServerName is what you'll be calling for use in the web browser.

Adding A Virtual Host to your Hosts File

1. Open your Terminal app (you can find it using Spotlight, or in /Applications/Utitilies)
2. Inside of terminal, type sudo nano /etc/hosts

• you will have to type your password, don't worry - it's normal for your password not to show :)
• hit return
• it will open up a text file in a Terminal-based text editor called Nano.
• note: if you need a backup of your hosts file - you can find the default contents below

3. Here is where we'll add the final step - the virtual host!
4. Add the following code to the bottom of your hosts file, adjusting the name to align with the ServerName that you set in your httpd-vhosts.conf file.

127.0.0.1 newsite.local
::1       newsite.local

Saving the Hosts File

1. After you've added these lines, use the keys:

• control+x (they key combination -> this exits Nano)
• y (the y key -> to say yes, I want to save)
• return (the return key -> to save the file as the same filename)
• then type: exit into the terminal to close it.

Last Steps

1. If all is said and done, all you should need to do now is:

• Restart Mamp
• Head to "http://newsite.local/" in your web browser! (or whatever you chose to call your site)

DONE! YAY!

Default Hosts File

-- just in case!

##
# 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
255.255.255.255 broadcasthost
::1             localhost
fe80::1%lo0 localhost