[Feature]: allow to use https on npx cap run --live-reload

[jcesarmobile]

Description

npx cap run --live-reload will load from http://host:port, but users might be running from https

Platforms

• iOS
• Android
• Web

Request or proposed solution

Allow to provide a param to use https instead of http on the url, like --ssl as ionic CLI does, or allow to provide a full live reload url with --live-reload-url or another param.

Note that the param or url will only load from https, but won't do anything to configure the server to use ssl, the user or the framework the users is using is responsible of configuring the server to use https (certificates, etc.)

Alternatives

No response

Additional Information

No response

[Shellishack]

Hi!

I had a somewhat similar feature request because I needed to use secure cookies in the HTTPS context.

I added a custom --https flag in the cli codebase. I also added some instructions on how to use it in the PR for both remote and local livereload with https://. You can check it out here #8194.

Edit: (I actually think it might make sense to mention in this issue some of the pit falls and potential workarounds I described in the PR. See below)

With fixes in #8194, you can now run cli with --https flag. For example:

> 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)