Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3
Created July 22, 2019 01:22
Show Gist options
  • Save prof3ssorSt3v3/edb2632a362b3731274cfab84e9973f9 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/edb2632a362b3731274cfab84e9973f9 to your computer and use it in GitHub Desktop.
//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
@williansmartins
Copy link

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

@prof3ssorSt3v3
Copy link
Author

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

@talatkuyuk
Copy link

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

@XxTavo16xX
Copy link

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

@OfficialMichaelK
Copy link

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

@fender0ne
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment