Use SSL in your local development environment
Posted
Updated
Europe’s developer-focused job platform
Let companies apply to you
Developer-focused, salary and tech stack upfront.
Just one profile, no job applications!
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.
💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.
To use https locally, we have to do the following:
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.
As the first step, you should generate a local Certificate Authority, and an SSL certificate for Local Development.
mkcert -install
.mkcert localhost
.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}"
}
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):
Never miss an article.