Serve an Angular app on localhost via HTTPS

This post is 4 years old. (Or older!) Code samples may not work, screenshots may be missing and links could be broken. Although some of the content may be relevant please take it with a pinch of salt.

Everything these days should be served over HTTPS. That's a trend, a requirement and there are some very good reasons behind this. It goes without saying that during testing an application we may want to test it using HTTPS as well even though we are on "localhost". There are a number of cases when enabling HTTPS is actually required: think about testing Progressive Web Apps with Lighthouse (we will get a reduced the score for a PWA if it's not served via HTTPS). And there are other use-cases where we need to use a secure context, even on localhost - such as getUserMedia.

In this article, we'll review how to enable HTTPS on localhost for Angular applications using the Angular CLI.

Creating a certificate via the Angular CLI

The Angular CLI has special flags that we need to use in order for our app to be served on HTTPS. The three flags are: --ssl true, --ssl-cert and --ssl-key, so the entire serve command would look like this: ng serve --ssl true --ssl-cert "/path/to/file.crt" --ssl-key "/path/to/file.key"

The --ssl-cert and --ssl-key options are not required - if you leave them out Angular will auto-create both of them.

The "problem" with this approach is that the certificate is not going to be trusted and this will cause a "This Connection Is Not Private" warning to appear in Safari (and a "Your connection is not private" warning in Chrome).

Let's take a look at how we can generate a trusted certificate and use that.

Create a certificate

In order to create a certificate - on a Mac OS - we can execute the following command: openssl req -newkey rsa:2048 -x509 -nodes -keyout server.key -new -out server.crt -sha256 -days 365

After the command execution, we'll be prompted to enter a few details about the certificate, go through those. The result should be a generated server.crt and a server.key file.

Theoretically, it doesn't matter where these files are generated as long as the Angular CLI can access them.

Trust the certificate

For our generated certificate to be trusted, we need to install it. On a Mac, this can be achieved by adding it to the keychain. Here's how to do it step by step:

  • Double click server.crt
  • Select the login keychain in Keychain Access
  • You should see an entry called localhost - double click that
  • Expand the 'Trust' section and select 'Always Trust' under 'When using this certificate'
  • This step may be optional: Save the changes by adding your password

On Windows, the steps should be similar please refer to this article.

Now that we have a trusted certificate installed, let's it try out: ng serve --ssl true --ssl-cert "./server.crt" --ssl-key "./server.key"

Note that your paths may be different.

Navigating to the browser should no longer give us a non-trusted certificate warning.