How to configure SSL locally 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.

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!

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.

Generating an SSL Certificate

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

You need a package manager to install mkcert:

  • MacOS: Use Homebrew or Macports.
  • Linux: Use certutil. Arch Linux only, mkcert is available on the Arch Linux repository.
  • Windows: Use chocolatey.
    1. Install mkcert.
    2. Create a locally trusted CA with mkcert -install.
    3. Generate an SSL certificate with mkcert localhost.

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}"
}

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. If you want to know more about Angular, have a look at these Angular Tutorials.

References (and Big thanks):

96

Categorías:

AngularTypescript

Tags:

AngularToolingTypescript