Setup secure HTTPS certificate for local Angular development on MacOS Mojave

HTTPS is table stakes for any web project now days.  I’m going to show you a super painless and powerful way to setup the following:

1. Self signed wildcard HTTPS certificate trusted by your Mac (so you don’t get untrusted cert errors from your browser)
2. Make a top level domain .test that routes all hosts to localhost (so you can emulate how CORS will behave in production, do HTTP/2 testing etc)
3. Configure Angular CLI’s ng command to use the certificate and honor the domain

You will run ng run start and you’ll end up with something like this:

Note: before you continue, instructions below are for MacOS only.

Step 1: Create self-signed wildcard SSL certificate

Christian Alfoni has a killer OSS project called create-ssl-certificate that we are going to leverage here.  If you don’t have NodeJS installed, do that now.  I recommend using fnm (if you run fish shell – which you should) or n.

1. Inside your angular project run mkdir dev-etc; cd dev-etc
2. Run npx create-ssl-certificate --hostname rynop --domain test .  Replace rynop with the hostname you want to use for local development.  You want to use the TLD test here because it is reserved for this purpose per RFC6761.  Don’t use dev because you will block things like https://web.dev.
3. Follow the directions on the output of this command to trust the newly created ssl cert.
4. Following create-ssl-certificate’s universal setup, we setup .test top level dns routing to localhost.  The mkdir and chown steps are to get around a brew link issue on MacOS:

   sudo mkdir /usr/local/sbin
   sudo chown -R `whoami`:admin /usr/local/sbin`
   brew install dnsmasq
   brew start dnsmasq

5. Setup dnsmasq config:

   mkdir -pv $(brew --prefix)/etc
   sudo cp -v $(brew --prefix dnsmasq)/homebrew.mxcl.dnsmasq.plist /Library/LaunchDaemons
   sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
   sudo mkdir -pv /etc/resolver
   echo "address=/.test/127.0.0.1" | sudo tee -a $(brew --prefix)/etc/dnsmasq.conf
   echo "nameserver 127.0.0.1" | sudo tee /etc/resolver/test

6. Restart your Mac

Step 2: Configure ng to use SSL and your new hostname

In your package.json update the start command to specify the following:

"start": "ng serve --ssl true --ssl-cert ./dev-etc/ssl.crt --ssl-key ./dev-etc/ssl.key --host 0.0.0.0 --disable-host-check"

This tells ng serve to use your SSL cert and to allow your custom host name.

All you have to do now is run yarn run start (or npm run start).  Open your browser and type in https://anything.yourdomain.test:<port ng start told you in output> and voilà – UR done.

You should not get notified by your browser that the SSL cert is invalid or not trusted.

Extra credit

There is nothing stopping you from using this new .test TLD with your API/Backend services in local development.  This will further emulate CORS and HTTPS issues that you will hit in production.