How to Have Clean URLs with MAMP on Mac

MAMP is my tool of choice for developing websites locally on my Mac. But, when I started using it out of the box, my local URLs were of this form:

127.0.0.1:8888/mysite.com

That was fine for most of my local sites. Occasionally, I’d have a problem when a site used root relative links, but I just lived with that. Also, it was kind of ugly, but this was just for development, so who cares, right?

But, I recently wanted to copy a WordPress Multisite install to my local computer and wasn’t able to get it to work with this URL format. So, I figured that a simple entry in my hosts file would fix it, but I discovered that hosts files can’t handle port numbers or subdirectories.

I did a bunch of research to finally fix this problem to get a clean local development URL of this format:

mysite.local

Here are my step-by-step instructions to get pretty URLs when using MAMP!

1. Get Rid of the Port Number

The first step is to get rid of the port number in the URL, since hosts files cannot deal with them. It’s easy to do, but it will make all of your existing dev site URLs obsolete, so be aware of that.

If you don’t have port numbers in your MAMP site URLs, you can skip this step!

Load MAMP and go to MAMP -> Preferences. Click the button that says “Set Web & MySQL ports to 80 and 3306”, then click “OK”.

Unfortunately, when I started using MAMP, I chose their “default” Apache port value of 8888. The settings on this page are misleading because port 80 is the actual default value that lets you eliminate the port number in the URL.

After restarting, MAMP, you should be able to access your local sites without the port number in the URL like this:

127.0.0.1/mysite.com

But remember, none of your WordPress sites will work with this URL until you do a search and replace on the database, but we’re not there yet.

2. Add Your Local URLs to Your Hosts File

The next step is to direct your local URLs to your localhost by adding them to your hosts file, which is located here on a Mac:

/etc/hosts

Go ahead and edit it using your favorite text editor and add all your local development sites like this:

127.0.0.1 mysite.local
127.0.0.1 anothersite.local
127.0.0.1 yetanother.local

Note, I decided to switch to the “.local” top-level domain for my local dev sites. You can choose whatever you want, but don’t use “.dev”, as that has been reserved for other purposes and won’t work in most browsers (I learned this the hard way back when I was using Desktop Server).

3. Add Your Local URLs to Your httpd.conf File

Now you have to tell Apache which directory to use for each URL. If you’re familiar with Apache, you know this happens in the httpd.conf file. You can find it here on MAMP for Mac:

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

Now, you can edit it directly, or do what I did, which is edit the httpd-vhosts.conf file in the “extra” directory here:

/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

If you do this, make sure that your main httpd.conf file includes the httpd-vhosts.conf file. In httpd.conf, find this line and make sure it’s uncommented:

Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Now, for each domain name, add an entry to connect it to the appropriate directory path on your computer like this:

<VirtualHost *:80>
  DocumentRoot "/Users/username/projects/mysite"
  ServerName mysite.local
</VirtualHost>

<VirtualHost *:80>
  DocumentRoot "/Users/username/projects/anothersite"
  ServerName anothersite.local
</VirtualHost>

<VirtualHost *:80>
  DocumentRoot "/Users/username/projects/yetanother"
  ServerName yetanother.local
</VirtualHost>

Remember to change the DocumentRoot URL to the appropriate path to your sites on your computer.

I also added this entry so I could access the project root through a browser:

<VirtualHost *:80>
  DocumentRoot "/Users/username/projects"
  ServerName localhost
</VirtualHost>

Save the file. If you were editing your httpd.conf file directly, you’re done with this step.

4. Set AllowOverride in Your httpd.conf File

After I did these steps (and doing a search and replace on my site’s database to update the URLs), I got the site to resolve, but permalinks were not working. Basically, the home page would show up, but I couldn’t access any posts or pages.

The solution is to go back into your httpd.conf file and search for “AllowOverride”. Once you find it, set it to “All” like this:

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride All
</Directory>

5. Save and Restart MAMP

Save all of the changes to your httpd.conf files, then re-start MAMP. You should be able to access your local dev sites through the new URLs! If it doesn’t work, add “http://” to the beginning of the URL.

Note, if you’re running local WordPress sites, you’ll need to do a search and replace on the database to update the URLs.

One Caveat – Updating MAMP

This setup worked great for me until I updated MAMP from version 5 to 6. I found out that doing a major MAMP update will blow away your httpd.conf file and your httpd-vhosts.conf. Luckily, I had Time Machine on my Mac, so I was able to recover my settings and apply them to the new files. Just something to keep in mind.

Did this work for you? Let me know in the comments!

Resources

Here are some of the articles I used to help figure this out!



1 thought on “How to Have Clean URLs with MAMP on Mac”

Leave a Comment or Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.