Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
//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
@wakaidev

This comment has been minimized.

Copy link

@wakaidev wakaidev commented Nov 19, 2019

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

@prof3ssorSt3v3

This comment has been minimized.

Copy link
Owner Author

@prof3ssorSt3v3 prof3ssorSt3v3 commented Nov 20, 2019

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

@dipzera

This comment has been minimized.

Copy link

@dipzera dipzera commented May 17, 2020

I'm getting ERR_SSL_PROTOCOL_ERROR. Any fixes?

@Arechok

This comment has been minimized.

Copy link

@Arechok Arechok commented Jan 27, 2021

How to enable openssl???

@henrykode

This comment has been minimized.

Copy link

@henrykode henrykode commented Feb 11, 2021

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.

@prof3ssorSt3v3

This comment has been minimized.

Copy link
Owner Author

@prof3ssorSt3v3 prof3ssorSt3v3 commented Feb 11, 2021

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.

@henrykode

This comment has been minimized.

Copy link

@henrykode henrykode commented Feb 13, 2021

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

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