Binary Carpenter

As a software developer, I usually found myself frustrated looking at the browser with the following notice when loading my local site:

Yes, the infamous “Your connection is not private notice”. You can bypass that by typing “THISISUNSAFE” in Chrome/Edge. However, a hack is still a hack. You deserve a good solution.

Today, I’m the solution provider. Let’s walk with me to make https://abc.local load with SSL like a normal secure site.

Here is the environment:

• OS: MacOS 10.15.3
• MAMP running Apache 2.4

Your environment may be different, however, the method is applicable to other environments running Apache.

Let’s get started.

How to configure Apache 2.4 on MAMP to enable local secure site

Step 1: Add your site to /etc/hosts

This is the easiest one. To host a site on your localhost, you need to add a record of that site to /etc/hosts file so when you type that site into your browser address bar, the browser know to look for it at your localhost.

In our case, we need to add abc.local to /etc/hosts.

Let’s open /etc/hosts by typing:

sudo vim /etc/hosts

I’m using vim as the text editor, however, you can use any other program you like. The important thing to note is opening it with sudo or you cannot save your changes.

On Windows, the equivalent of /etc/hosts is C:\Windows\System32\drivers\etc\hosts. Just open your notepad with Administrator right and then open the hosts file and you’ll be fine.

Let’s insert:

127.0.0.1 abc.local

at the end of the hosts file and save then close it. Like this:

And you are done with step one!

Step 2: Enable NameVirtualHost, SSL, Vhosts In Apache

In this step, we are going to modify some of Apache’s configurations so it’ll accept SSL, VirtualHost records and Named virtual host. If you have been using MAMP (or XAMPP) for a while, you know how to access the server via http://localhost… However, to access localhost with custom domain name like abc.local, you need to do the following:

First, open the file at /Applications/MAMP/conf/apache/httpd.conf with your favorite text editor. I’ll use Vim as usual.

Now, look for the following lines:

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

And remove the # character at the beginning of those lines.

Save the file and quit.

Next, let’s open /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf to enable name based virtual hosting.

Let’s add the following lines if they are not available or commented:

NameVirtualHost *:80
NameVirtualHost *:443

Then save the file and quit.

You are ready for step 3!

Step 3: Generate your self signed SSL certificates

To generate a certificate for your site, open terminal and run the following command:

openssl req -x509 -newkey rsa:4096 -sha256 -days 3650 -nodes \
  -keyout abc.local.key -out abc.local.crt -extensions san -config \
  <(echo "[req]"; 
    echo distinguished_name=req; 
    echo "[san]"; 
    echo subjectAltName=DNS:abc.local,DNS:developer.abc.local,DNS:www.abc.local,DNS:api.abc.local,IP:10.0.0.1,IP:127.0.0.1
    ) \
  -subj "/CN=abc.local"

As you can see, in the script, I didn’t just generate certificate for abc.local. I also generate certificate for a bunch of subdomains like www, developer… If you need SSL for subdomain, you can add more DNS record. One caveat though, you cannot add subdomain of subdomain. For example, info.developer.abc.local would not work.

You can also notice that the params -day 3650. That means the certificate is valid for 10 years! How about 100 years? Just replace 3650 with 36500.

As you can see, I’ve successfully generate the certificate files with the command. You’ll get two files: abc.local.key and abc.local.crt. Let’s put these two files in /Applications/MAMP/conf/apache/ssl. If this folder is not available, you need to create it.

Phew! You’ve done a lot. There is two more steps before you can load your site over SSL. Let’s get to step 4!

Step 4: Create your virtual host record in httpd-ssl.conf

Remember httpd-ssl.conf? You’ve seen this file earlier in the post. Let’s open it and add the following record at the end of the file:

<VirtualHost _default_:443>
	ServerName abc.local
	ServerAlias abc.local
	DocumentRoot "/Applications/MAMP/htdocs/abc/"
	ErrorLog "logs/abc.local-error_log"
	CustomLog "logs/abc.local-access_log" common

	SSLEngine on
	SSLCertificateFile  "/Applications/MAMP/conf/apache/ssl/abc.local.crt"
	SSLCertificateKeyFile  "/Applications/MAMP/conf/apache/ssl/abc.local.key"
</VirtualHost>

Let’s safe the file and quit. Now, it’s time to work on the certificate.

Step 5: Trust your certificate

Since your certificate is self-signed, you need to manually trust it. Let’s open the abc.local.crt file by double clicking on it:

Now, select System as Keychain and click on Add. The system will ask you to enter password. Do as asked to complete this step.

Now, look for abc.local in the list of certificates and double click on that.

Select Always trust and close the window. You may be asked to enter your password again. Do so as this is the last step you need to work with the certificate!

Final step: Restart MAMP and view your site

Now, go to your browser and type https://abc.local, you should see the site is successfully loaded without any security warning. Clicking on the lock icon, you’ll see the site is trusted:

You may see a 404 page. That’s expected since our path to the site is not available yet (htdocs/abc). Let me create a very quick index.html in htdocs/abc so you’ll see the content.

That’s it! now you have the SSL certificate valid for 10 years!

Bonus tips: How to make SSL works on webpack-dev-server

Now you know how to create secure site on localhost with MAMP. Using the same certificate files, you can make any sites with webpack dev server or other nodejs based app secure on localhost too.

In this example, I’m going to create a new Vue cli project and also create a vue.config.js file at the project root. The content of the file is simple as follow:

var fs = require('fs')
module.exports = {
    devServer: {
        host: 'abc.local',
        port: 8081,
        https: true,
        key: fs.readFileSync("/Applications/MAMP/conf/apache/ssl/abc.local.key"),
        cert: fs.readFileSync("/Applications/MAMP/conf/apache/ssl/abc.local.crt"),
    }

}

As you can see, the key is to set https to true and point key and cert options to the files we have created previously.

When I run the app with npm run serve, you can see that the app is served over https and there is no certificate problem:

Conclusion

I don’t know about you but the day I discovered installing SSL for my local site this easy, my life changed. I no longer have to rely on options like Flywheel’s local just to get the https to work. Hopefully, this tutorial helps you has much it helped me. If you have any suggestions, please let me know in the comment below.