This article was originally posted on October 29, 2019.
Glad to be back blogging and providing you guys with helpful web development tips. If you’re a regular visitor of Mr. Technique, then you’ll notice that I just redesigned the website. I redesigned this site using Beaver Builder which is one of my favorite WordPress themes.
Pretty much all of my clients’ websites use https, and I create local versions of their sites if they are on a maintenance plan.
It took me years to figure out how to do this, but since I did, I’d like to spread the joy and show you how to do it. This tutorial assumes that you are familiar with setting up local sites with MAMP Pro on an Apple computer.
Are you interested in learning about setting up SSH keys on a MacBook Pro?
Create a New Host Using HTTPS
I’m setting up a local WordPress site but this tutorial applies to any type of website (Drupal, Joomla, Static HTML, etc) that will be using https.
To set up your local site on MAMP Pro with https, you will:
- Click the plus button and a new window will slide down.
- Enter the name of your local site. I use an extension that I usually don’t type when browsing the web. In this screenshot, I used a .site extension.
- Pick the directory that you want your local site files to reside in.
- Check the box to generate a self-signed SSL certificate. In this screenshot, I’m creating a WordPress site, but if you’re not creating a WordPress site, don’t check this box.
- Click the Continue button to close the small window.
- Click the Save button to save all of your changes.
Because the self-signed certificate isn’t accepted, you’ll see the following error screen when you try to access your local https site on Chrome.
Self-signed certificates aren’t accepted by browsers by default. To get rid of this warning on Chrome, you will need to change some settings as shown in the screenshot below.
The explanation for the numbers are as follows:
- Go to the SSL tab.
- Check the Enforce TLS protocols and Allow http connections.
- Click the Certificate file icon to bring up the local site’s self-signed certificate directory.
Getting Your Browser to Trust Your Self-Signed Certificate
Next, you’ll open up Apple’s Keychain Access utility by going to Applications -> Utilities -> Keychain Access or you can just type “keychain access” in Spotlight to pull it up. Put your MAMP Pro window next to your Keychain window, so you can drag the certificate file to it like so:
To get your computer to trust your self-signed certificate, you will need to right-click on it in the Keychain Access window. When you do a window like this will pop up.
Click the Get Info option, and you’ll see another window pop up like this.
- Click the arrow right next to Trust, and you’ll see a few more settings appear.
- The only setting you need to change is the one for When using this certificate. Set it to Always Trust.
When you close this window, you’ll be asked to enter your computer’s password to save the settings. Once you do that, your certificate will now be accepted. You can now pull up your local site on Chrome or Safari without the security warning.
To get Firefox to trust MAMP Pro’s self-signed certificate, you’ll need to do the following:
- Go to Settings -> Privacy & Security.
- Scroll down to the Certificates section and click the View Certificates button.
- Click the Import button.
- Go to the folder where MAMP Pro’s root certificate is located (usually it’s is in Applications -> MAMP -> Library -> OpenSSL -> certs) and select it (usually it’s named MAMP_PRO_ROOT_CA.crt).
You can now pull up your local site on Firefox without the security warning.
Thanks to one of our commenters, John, for providing this solution below!
If you feel like this post helped you out, I’d appreciate it if you shared it on your social media accounts. Thanks for reading this tutorial.