How to serve Angular locally over HTTPS

Introduction

Angular has a convenient launcher to serve your app during development (ng serve). It watches for file changes and automatically reloads saving time. By default it serves over HTTP but to avoid issues with mixing HTTP and HTTPS content, you might want to run the local development server using SSL to serve over HTTPS. This will cover how to use ng serve and npm run start to include SSL certificates to use HTTPS.

Launch ng serve with SSL

There is a simple flag you can get with ng serve to turn on SSL. All you have to do is run with -ssl true like this:

ng serve --ssl true

This will generate self-signed certs automatically.

Specify certificate and key

If you don't want to use the auto-generated certificate, you can create and specify which certificate and key to use with the --ssl-cert and --ssl-key flags.

I have a couple tutorials on creating certificates:

Here is an openssl command that will generate a self-signed certificate and private key:

openssl req -newkey rsa:2048 -nodes -keyout privkey.pem -x509 -days 36500 -out certificate.pem -subj "/C=US/ST=NRW/L=Earth/O=CompanyName/OU=IT/CN=www.example.com/[email protected]"

Then you can try passing in the privkey.pem and certificate.pem files.

ng serve --ssl --ssl-cert certificate.pem --ssl-key privkey.pem

Update npm script

The default npm start script runs ng serve in the package.json file. You can change the start command by modifying the scripts section in the package.json file of your project. For example:

{
  // ...
  "scripts": {
    // ...
    "start": "ng serve --ssl true",
    // ...
  },
  // ...
}

Then you can run the start script like normal and it will include SSL:

npm run start

You can set other options with the ng serve command, like specifying which configuration and environment files to use. For more information on that check out my tutorial Angular Create Multiple Environment files.

Conclusion

After reading this, you should be able to run your Angular app locally over HTTPS.