cert-commands.txt

//Self-Signed Certificate for using with VS Code Live Server

//Save both files in a location you will remember

1. create a private key
openssl genrsa -aes256 -out localhost.key 2048
// you will be prompted to provide a password
//this will create localhost.key (call it whatever you like)

2. create the certificate
openssl req -days 3650 -new -newkey rsa:2048 -key localhost.key -x509 -out localhost.pem 
//you will be prompted for the password from above
//you will have to complete the various prompts
//this will create localhost.pem (call it whatever you like)

3. Create a .vscode folder in the root of your project
4. Create a settings.json file inside the .vscode folder.
5. Add the following to the settings.json file
{
  "liveServer.settings.port": 5501,
  "liveServer.settings.root": "/",
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.https": {
    "enable": true,
    "cert": "/Users/steve/Documents/code/https/localhost.pem",
    "key": "/Users/steve/Documents/code/https/localhost.key",
    "passphrase": "12345"
  }
}
6. Adjust the location of the .pem certificate and the .key files.
7. Update the passphrase to be the password you used when creating the key

Great guide. One suggestion I found. If using chrome you have to enable the flag. chrome://flags/#allow-insecure-localhost for it to properly load

Good note. That will skip the user having to go through the steps of confirming the acceptance of the certificate.

I'm getting ERR_SSL_PROTOCOL_ERROR. Any fixes?

How to enable openssl???

I created .pem and .key file but in the browser I have this error: "NET::ERR_CERT_AUTHORITY_INVALID".
Can you put a .pem and .key file to download? Thank you.

No. I can't share certificate files. They are password protected files for my computer. You have to generate your own.

Chrome no longer allows these self generated certificates anyway.

Ok, thank you. I used https in a pwa with service worker with live server in vscode. I have this error:

An SSL certificate error occurred when fetching the script.
(index):78 Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://localhost:5500/public/') with script ('https://localhost:5500/public/sw.js'): An SSL certificate error occurred when fetching the script.
(anonymous) @ (index):78
Promise.catch (async)
(anonymous) @ (index):77

@prof3ssorSt3v3
thank you for your tutorial, to smart!
Chrome says "NET::ERR_CERT_INVALID", do you have some advice?

Since this tutorial was made Chrome started rejecting self signed certs. Try - https://letsencrypt.org/

Great guide. One suggestion I found. If using chrome you have to enable the flag. chrome://flags/#allow-insecure-localhost for it to properly load

This has worked for me ... :)

Thanks! Now i can code my webxr app and tested directly through my phone.

the first time i did this openssl created a .key and a .csr file instead of a .pem

not a clue why it did it correctly the second time but i almost lost my mind until i realized vscode needs to see a .pem

Since this tutorial was made Chrome started rejecting self signed certs. Try - https://letsencrypt.org/

One option is to install a local CA (only for local development).
Take a look at this tool: mkcert at https://github.com/FiloSottile/mkcert