feat(cli): Add --https option for --live-reload

[Shellishack]

Added a --https flag to allow cap run to use https instead of http.

[Edit by @OS-pedrogustavobilro] Fixes #8049. Partially addresses #8303

For example, now running with --https flag, cap cli will have:

> cap run android -l --host=192.168.2.101 --https
...
[info] App running with live reload listing for: https://192.168.2.101:3000. Press Ctrl+C to quit.

Live reload remote

It works out of the box.
e.g. cap run android -l --host=capacitorjs.com --https --port=443

Live reload local https server

⚠️Self-signed SSL issue:
Using --https may cause capacitorjs not to load the content in WebView if the web view has a self-signed SSL certificate.

My local workaround (fully local, but make your own CA):

For local development, I ended up working around this by making a local CA certificate, and sign server certificates with this CA. Then I would need to install the CA file on my android device. Now live reloading a https local dev server is possible.

For nextjs:
If you have run next dev --experimental-https before, delete ./certificates folder. Then continue.

mkdir certificates
cd certificates

Do the below in ./certificates folder

1. Generate a local CA.
   Use devCA.key to install on device later.

openssl genrsa -out devCA.key 2048
openssl req -x509 -new -nodes -key devCA.key -sha256 -days 3650 -out devCA.crt -subj "/CN=Local Development CA"

2. Create a .cnf
   e.g.

[req]
default_bits       = 2048
prompt             = no
default_md         = sha256
distinguished_name = dn
req_extensions     = req_ext

[dn]
CN = 192.168.1.100 (or your local dev server's ip)

[req_ext]
subjectAltName = @alt_names

[alt_names]
IP.1 = 192.168.1.100
DNS.1 = mypc
DNS.2 = mypc.local
DNS.3 = localhost
DNS.4 = (your custom domain for local testing)

3. Generate private key

openssl genrsa -out localhost-key.pem 2048
openssl req -new -key localhost-key.pem -out localhost.csr -config localhost.cnf

4. Sign the certificate with CA

openssl x509 -req -in localhost.csr -CA devCA.crt -CAkey devCA.key -CAcreateserial -out localhost.pem -days 365 -sha256 -extensions req_ext -extfile localhost.cnf

5. Install devCA.crt on Android.
   First, copy devCA.crt from PC to you android device. On Android, go to "settings -> security and privacy -> more security settings -> install from device storage -> CA certificate", then locate devCA.crt and install.

Now you can go back to root folder. Run next dev --experimental-https, and run cap run android -l --host=mypc --https. Finally you should be able to see your local https server.

Other options

Maybe try Ngrok (untested)

[OS-pedrogustavobilro]

Hey @Shellishack thanks for opening the PR! Tested here with ngrok and in conjunction with #7528 (otherwise allowNavigation gets overridden), and it seems to be working on both Android and iOS.

[Shellishack]

Thanks @OS-pedrogustavobilro for your help! Loved the work Capacitor team has put up for this!!

[jcesarmobile]

It should not add a default 443 port for https, in fact we shouldn't add 3000 port as default when not using https neither (but changing it right now would be a breaking change, so better leave 3000 as it is for now for non https urls)

If I use capacitor run ios --host 78d8-83-53-7-217.ngrok-free.app -l --https, since it adds the 443 port the url to load will be https://78d8-83-53-7-217.ngrok-free.app:443, but since it's the default port the WebView will turn the url into just https://78d8-83-53-7-217.ngrok-free.app, and since it doesn't match the url in the capacitor.config.json file it will open in Safari instead of inside the app.

[OS-pedrogustavobilro]

@jcesarmobile good point, when I was testing I had that same issue in iOS, and had added the ngrok domain to capacitor config server.allowNavigation to overcome it, but yeah after changing it in 85abc26, no longer need that.

Thank you!