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:
- Self signed wildcard HTTPS certificate trusted by your Mac (so you don’t get untrusted cert errors from your browser)
- Make a top level domain
.testthat routes all hosts to localhost (so you can emulate how CORS will behave in production, do HTTP/2 testing etc)
- Configure Angular CLI’s
ngcommand 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.
- Inside your angular project run
mkdir dev-etc; cd dev-etc
npx create-ssl-certificate --hostname rynop --domain test. Replace
rynopwith the hostname you want to use for local development. You want to use the TLD
testhere because it is reserved for this purpose per RFC6761. Don’t use
devbecause you will block things like https://web.dev.
- Follow the directions on the output of this command to trust the newly created ssl cert.
- Following create-ssl-certificate’s universal setup, we setup
.testtop level dns routing to localhost. The
chownsteps are to get around a
brew linkissue on MacOS:
sudo mkdir /usr/local/sbin sudo chown -R `whoami`:admin /usr/local/sbin` brew install dnsmasq brew start dnsmasq
- 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
- Restart your Mac
Step 2: Configure
ng to use SSL and your new hostname
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"
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.
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.