How to configure SSL locally in Angular?
Tags: angular, tooling, typescript
Published: 2021-07-17 10:52:11

---
title: How to configure SSL locally in Angular?
published: true
date: 2021-03-27 00:00:00 UTC
tags: angular, tooling, typescript
canonical_url: https://www.mariokandut.com/how-to-configure-https-ssl-in-angular/
---

If you're running your Angular app locally its served using HTTP by default. In some cases it is required that your Angular app is served via https for integrating a service like Azure B2C or similar. This article is about how to use the Angular CLI to serve an Angular web app over https in local development. Let's see how this can be achieved in Angular.

If you want to find out how this is achieved in a React app, check out this article - [How to setup ssl in React](https://www.mariokandut.com/how-to-setup-https-ssl-in-localhost-react/).

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#using-https-in-development)Using HTTPS in development

To use https locally, we have to do the following:

1. Generate local Certificate Authority, and an SSL certificate
2. Set the certificates when serving Angular
3. Testing!

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#custom-ssl-certificate)Custom SSL certificate

You have to create a local Certificate Authority, and an SSL certificate and set the `SSL_CERT_FILE` and `SSL_KEY_FILE` to the generated files.

#### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#generating-an-ssl-certificate)Generating an SSL Certificate

As the first step, you should generate a local Certificate Authority, and an SSL certificate for Local Development.

1. 

You need a package manager to install mkcert:

  - MacOS: Use [Homebrew](https://brew.sh/) or [Macports](https://www.macports.org/).
  - Linux: Use **certutil**. Arch Linux only, mkcert is available on the Arch Linux repository.
  - Windows: Use [chocolatey](https://chocolatey.org/).
2. Install [mkcert](https://github.com/FiloSottile/mkcert).
3. Create a locally trusted CA with `mkcert -install`.
4. Generate an SSL certificate with `mkcert localhost`.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#set-custom-ssl-certificate)Set custom SSL certificate

To serve an Angular app locally with SSL we have to use the options `--ssl`, `--ssl-key` and `--ssl-cert` together with `ng serve`. Hence, after generating the local certificate authority and ssl certificate we have to set the `sslKey` and `sslCert` environment variables to the path of the certificate and key files.`ssl` has to be also true.

```
ng serve -o -ssl true --sslKey {KEY_PATH} --sslCert {CERT_PATH}
```

The variables `CERT-PATH` and `KEY-PATH` are the paths to the generated files. Eventually, we set the command as the `npm start` script, and the application runs on HTTPS.

```
"scripts": {
   "ng serve --ssl true --ssl-key {KEY-PATH} --ssl-cert {CERT-PATH}"
}
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)TL;DR

- To enable HTTPS locally, local certificate authority and ssl certificate have to be created and set in the environment.
- Updating the `npm start` script makes it.

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**. If you want to know more about **[Angular](https://www.mariokandut.com/tags/angular)**, have a look at these [Angular Tutorials](https://www.mariokandut.com/tags/angular).

**References (and Big thanks):**

[bitsrc.io - dulanka](https://blog.bitsrc.io/using-https-for-local-development-for-react-angular-and-node-fdfaf69693cd),[chocolatey](https://chocolatey.org/),[mkcert](https://github.com/FiloSottile/mkcert)