Debug Angular apps locally with a self signed SSL certificate

How to setup and serve Angular apps over HTTPs locally on Mac and Windows both with localhost and over an IP address with a self signed SSL certificate using openssl

Philipp Bauknecht
May 13, 2020 · 3 min read

For many reasons like callbacks from auth providers you might want to run your Angular app locally over HTTPS. While in some scenarios setting the ssl flag in the ng serve command might do the trick (which will create a temporary certificate), there are other occasions, like testing PWAs where you end up needing a fully trusted ssl certificate and no browser complaining.

In this case we need to create our own certificate, install it on our machine, trust it and finally tell the Angular CLI to use it.

Create a certificate with openssl

Here is a minimal openssl certificate configuration:

Replace commonName and subjectAltName with your IP or localhost.

Use the following set of commands e.g. in Git Bash to create both the certificate and key file:

This will result in a server.crt certificate and a server.key file.

Install Certificate on Windows

Double click the .crt file and click “Install Certificate”:

Image for post
Image for post

Select “Current User” as the Store Location and click “Next”:

Image for post
Image for post

Select “Place all cert…”, click “Browse” and choose “Trusted Root Certification Authorities”. Finish the wizard.

Image for post
Image for post

Install Certificate on Mac

Double click the .crt file to add it to the keychain:

Image for post
Image for post

Right click the certificate and select “Get Info”. Set “Secure Sockets Layer (SSL)” to “Always Trust”. When closing the window you will need to provide your admin password to confirm the change:

Image for post
Image for post

Serve Angular with a custom certificate

Finally let’s serve angular over https with our custom certificate with this command:

And we should see valid https connection in the browser both for windows and mac:

Image for post
Image for post

That’s all folks! Hope to save you some time researching…

medialesson

We help our customers design, architect, develop and…

Philipp Bauknecht

Written by

CEO @ medialesson. Microsoft Regional Director & MVP Windows Development. Father of identical twins. Passionate about great User Interfaces, NYC & Steaks

medialesson

We help our customers design, architect, develop and operate modern, intelligent, beautiful and usable apps on any platform powered by the Cloud, IoT and AI.

Philipp Bauknecht

Written by

CEO @ medialesson. Microsoft Regional Director & MVP Windows Development. Father of identical twins. Passionate about great User Interfaces, NYC & Steaks

medialesson

We help our customers design, architect, develop and operate modern, intelligent, beautiful and usable apps on any platform powered by the Cloud, IoT and AI.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store