While MAMP might not be the most developer-centric platform for web development (as opposed to Vagrant), I still love how lightweight and easy it is to use. Unless you need reproducible environments (if you’re reading this post, you most likely don’t), there’s nothing wrong with using MAMP.

Vhosts make your whole development process cleaner. Instead of having projects in subfolders, such as localhost/project1, localhost/project2, your projects have their own domains like project1.localhost, project2.localhost, which is closer to the way they’ll operate on the web, and lets you do things like use relative URLs.

Thankfully it’s quite easy to set up vhosts with MAMP. Just follow these steps and you should be up and running.

Step 1

Open /etc/hosts in your favourite text editor, and add your projects to the end of the file like so:

Step 2

Open /Applications/MAMP/conf/apache/httpd.conf, and search for Virtual hosts. You’ll see a section like so:

Uncomment the include line, so that it looks like this:

While you’re in this file, you might also want to comment out the following two lines by putting a hash in front of them. This stops MAMP from overriding the favicon for all projects, and can prevent issues if you have a directory named icons.

Step 3

Open /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf and change NameVirtualHost *:80 to NameVirtualHost *.

Then add these lines to the bottom of the file, customising the DocumentRoot and ServerName for each project. To add new projects, just add a new VirtualHost directive.

Step 4

Open up MAMP, click on Preferences, click on the Ports tab, and click Set Web & MySQL ports to 80 & 3306. This allows you to open up your project.localhost URLs without specifying a port at the end (like :8888 as MAMP defaults to).

Start the MAMP server, and you’re done. You should have vhosts, with favicons and .htaccess working as desired.

A note on suffixes: You may be tempted to use .local or .dev as your suffix as it makes logical sense and many tutorials recommend it. However, you will experience slow page loads when using .local as the bonjour service interferes with the .local domain (reference). .dev worked for many years up until December 2017, when Chrome stared forcing HSTS on .dev domains, breaking thousands of local development environments.

.localhost is the safest option for future development.