Note, since writing this article, I have switched to LocalWP, which is superior to MAMP in practically every way and has clean URLs from the get-go. I’ve kept the article below for those still using MAMP, but rather than messing with these settings, I’d recommend that you check out LocalWP. It’s totally free!
If you want to keep struggling with MAMP (like I did for a long time), keep reading:
The Original Article
When I started using MAMP for local website development, my local URLs were of this form:
Or of this form:
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:
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:
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:
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:
Now, you can edit it directly, or do what I did, which is edit the httpd-vhosts.conf file in the “extra” directory here:
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:
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!
Here are some of the articles I used to help figure this out!
Please Leave a Question or Comment
Hi, done everything PERFECT, but… ERR_CONNECTION_REFUSED :-(
Here are some things to check:
[…] How to Have Clean URLs with MAMP […]