How to setup Live Server extension for Visual Studio Code to use HTTPS with your own SSL certificate without Chrome complaining about an untrusted certificate or insecure origin.
โ Chrome 115.0.5790.75
โ macOS Monterey 12.6.7
Warning
Make sure Chrome is not already running. If you install the cert while Chrome is running, restart Chrome.
Important
When copying and pasting, set CHANGEME to your username.
Install mkcert per its instructions.
brew install mkcert
brew install nss # if you use Firefox
Open Terminal.app and run the following command:
mkcert -key-file ~/localhost-key.pem -cert-file ~/localhost-cert.pem -install localhost 127.0.0.1
Explanation:
mkcert
-key-file ~/localhost-key.pem # We'll use this certificate for multiple projects, so save the files in our home directory
-cert-file ~/localhost-cert.pem # Ditto
-install localhost 127.0.0.1 # Use localhost and 127.0.0.1 as hostnames
Note
In my usage, specify both localhost
and 127.0.0.1
if you want Chrome to accept either hostname.
You can also add additional hosts like domain.local
, domain.dev
, and dev.domain.com
. Refer to the mkcert documentation for examples. Alternatively, you can set liveServer.settings.host
to switch host name between localhost
and 127.0.0.1
or whatever you set your hostname in the mkcert command above (source).
Switch to Visual Studio Code.
If it does not already exist, create a new folder ๐ in your workspace called .vscode.
If it does not already exist, create a new file ๐ inside of .vscode called settings.json.
Create a new object called liveServer.settings.https and set the cert and key properties to the corresponding paths where you saved your certificate files created above.
Warning
Don't use the relative path to your home directory e.g., ~/localhost-cert.pem
.
In my testing, using the relative path inside of .vscode/settings.config caused the Live Server extension to silently fail; it won't launch nor raise a visible error notification inside the IDE.
// .vscode/settings.json
{
"liveServer.settings.https": {
"enable": true,
"cert": "/Users/CHANGEME/localhost-cert.pem",
"key": "/Users/CHANGEME/localhost-key.pem"
}
}
๐พ Save the file.
๐๐ผ You can now launch Live Server without Chrome complaining about an insecure localhost nor an insecure SSL certificate.
GitHub introduced admonitions to its GFM spec.
Now added to the docs.