Visual Studio Code Live Server HTTPS Secure Server

Setup Visual Studio Code Live Server to Use HTTPS.md

Setup Visual Studio Code Live Server to Use HTTPS

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 certificate while Chrome is running, restart Chrome.

Important

When copying and pasting, set CHANGEME to your username.

Install mkcert

Install mkcert per its instructions.

brew install mkcert
brew install nss # if you use Firefox

Create and install the SSL certificate

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 \
       -cert-file ~/localhost-cert.pem \
       -install   localhost 127.0.0.1

This command:

• Creates a private key file (localhost-key.pem)
• Creates a certificate file (localhost-cert.pem)
• Installs the certificate for both localhost and 127.0.0.1

By saving the files in your home directory, you can use the certificate in multiple projects.

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

Configure Live Server

Switch to Visual Studio Code.

If it does not already exist, create a new folder 📂 in the root of 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 server nor an insecure SSL certificate.

GitHub introduced admonitions to its GFM spec.

Now added to the docs.