Ionic ssl generate trust - ionic-framework

Question

I am using the new ionic 4.0.0-beta.19 framework, trying to use the ionic serve --ssl option.
I have created a new ionic project using the cli, I have run ionic generate ssl, which has created 2 files in /.ionic/ssl
cert.pem
key.pem
When running ionic serve --ssl in chrome I get the message “Your connection is not private”, I’ve had this before doing something similar, to fix this I’ve added the localhost cert file to my keychain access (using Mac) and set the certificate as always trust.
I’ve had this running before on ionic 4, by generating a certificate myself, adding the cert to the angular.json file like below:
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build",
"ssl": true,
"sslKey": "./ssl/server.key",
"sslCert": "./ssl/server.crt"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
}
With above though I added the crt file and key rather than pem and key, do I need to go add these manually? Or is this done automatically using the generate command?
When viewing the served localhost in the browser, I can see the serial number of the certificate the browser is using, is different to the serial number of the pem file I added to the keychain access, so wasn’t sure if it generates a .crt file in another local, that I need to add?

Answer 1

I faced the same questions about configuring my Ionic-Angular project to be served with SSL.
Actually, I didn't want solely the Ionic app to be served over SSL, but the all stack, including back-ends (.Net, Spring and Keycloak) and I wanted the Android version of my Ionic app to consume those "self-signed" back-ends without problem.
I posted a rather detailed how-to there: How to properly setup my Ionic (Angular) dev machine with self-signed certificate?. This off-course covers the part you're asking for ;)