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
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-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"
--ssl-keyoptions 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
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
- Select the
- 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.