Using Angular CLI to serve over https locally

Creating the certificate

[req]
default_bits = 2048
prompt = no
default_md = sha256
x509_extensions = v3_req
distinguished_name = dn
[dn]
C = GB
ST = London
L = London
O = My Organisation
OU = My Organisational Unit
emailAddress = email@domain.com
CN = localhost
[v3_req]
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost.key -days 3560 -out localhost.crt -config certificate.cnf

Configuring Angular CLI to use https

"start": "ng serve --ssl --ssl-key d:\\certificates\\localhost.key  --ssl-cert d:\\certificates\localhost.crt"

Trusting the certificate on Windows

Trusting the certificate on Mac OS X

References

  1. Certificate Authority on Wikipedia: https://en.wikipedia.org/wiki/Certificate_authority
  2. Angular CLI wiki for ng serve: https://github.com/angular/angular-cli/wiki/serve
  3. Open SSL documentation: https://www.openssl.org/docs/man1.0.2/apps/openssl-req.html
  4. Certificates in Microsoft Management Console: https://technet.microsoft.com/en-us/library/dd632619.aspx
  5. Trusting certificates in OS X Sierra: https://support.apple.com/kb/ph25443?locale=en_GB

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Front-end pagination to display data over multiple pages using vanilla JS and jQuery.

Set up Stripe on React Native / NodeJS

Understanding The React Source Code V

How to set up Jest in Angular App

Front End Interview Questions

React Hooks: useEffect()

2 minute & 2 Steps for installing Tailwind CSS in React

Fundamental javascript concepts

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
Richard Russell

Richard Russell

More from Medium

How to add Bootstrap to the Angular Project

Synchronize Data Grid state with the URL (Angular, ngqp, DevExtreme)

How to open a new browser tab with Angular