Local Development with SSL certificates is no longer a pain - mkcert

I came across mkcert recently and the author has rightly mentioned some of the issues we face during the transition from http (development) to https (production).

“…more and more browser features are being made available only to secure origins, and testing with HTTP hides any mixed content issues that can break a production HTTPS website.”

Of course, we can create SSL certificates for local development and some examples can be found here and here. But as you can see, we have to generate a self-signed certificate and then some X number of steps to make it work. With the advent of mkcert that mundane work is long gone.

Once you install mkcert, all you have to do is to mention the domains that you are supporting and you are done. 
cd into your project repo. Let’s say for example, if my domain is www.undivided.com then I would generate a certificate by

mkcert www.undivided.com localhost 127.0.0.1

This will create a new certificate and the key within the same folder.

Output of mkcert

I’m using angular and to run the development server in SSL mode with the generated certificates, I’ve to run the below command:

ng serve --ssl \
--ssl-cert "www.undivided.com+2.pem" \
--ssl-key "www.undivided.com+2-key.pem"

Once the server is up and running, head over to https://localhost:4200/ and you should see this :)

Secure localhost :)

And for those power users who wants to use the final domain name in their local development make an entry in the /etc/hosts file for your domain (in our case it is www.undivided.com).

Now restart the angular server with the host to run it locally.

ng serve --ssl \
--ssl-cert "www.undivided.com+2.pem" \
--ssl-key "www.undivided.com+2-key.pem" \
--host "www.undivided.com"
Custom hostname with SSL in local

Voila! Enjoy developing in SSL :)

Hope you enjoyed reading this as much as I enjoyed writing it. 
If you think this will be of help to someone? Do not hesitate to share. If you liked it, tap the clap below so other people will see this here on Medium. Don’t forget to show some love by following the blog!