Enable HTTPS for Live Server VS Code Extension

Learn how to enable HTTPS for the Live Server extension in Visual Studio Code. Step-by-step guide for configuring HTTPS with self-signed certificates.

If you’re already using the Live Server extension, you probably know how it helps preview your web pages in real-time, making your development process faster. However, there are times when you might need HTTPS, especially if you're testing features like service workers or APIs that require a secure connection.

In case you haven't installed the Live Server extension yet, you can easily get it from here.

How to Enable HTTPS for Live Server in VS Code

To enable HTTPS in Live Server, we need to complete two main steps: first, generate a self-signed certificate using OpenSSL, and then configure the Live Server to use HTTPS.

Step 1: Generate SSL Certificates

To generate the private key and certificate, you need OpenSSL installed.

1. Open Terminal (or Command Prompt on Windows).
2. Run the following commands to generate the SSL certificate and key:

bashCopy
   openssl genpkey -algorithm RSA -out server.key
   openssl req -new -key server.key -out server.csr
   openssl x509 -req -in server.csr -signkey server.key -out server.cert

This will generate two files: server.key (private key) and server.cert (certificate).

Step 2: Configure Live Server to Use HTTPS

1. Open your VS Code editor.
2. Create a .vscode folder in the root of your project
3. Create a settings.json file inside the .vscode folder.
4. Open the settings.json file and add the following configuration:

jsonCopy
   "liveServer.settings.https": {
     "enable": true,
     "cert": "/path/to/your/server.cert",
     "key": "/path/to/your/server.key",
     "passphrase": "yourPassphraseHere"
   }

Make sure to replace "/path/to/your/server.cert" and "/path/to/your/server.key" with the actual file paths to your certificate and key. If you used a passphrase when generating the key, replace "yourPassphraseHere" with your passphrase. If you didn’t use a passphrase, leave it empty ("").

Step 3: Start Live Server with HTTPS

1. After adding the configuration, save the settings.json file.
2. Open the HTML file you want to preview.
3. Right-click on the file and select Open with Live Server or click on the "Go Live" button in the bottom-right corner of VS Code.
4. Your website will now be served over HTTPS!

Step 4: Verify HTTPS is Working

1. Open your browser and go to https://localhost:5500 (or another port if you've customized it).
2. You should see your web page served over HTTPS. The browser may show a warning for self-signed certificates, but that’s normal for local development.

Conclusion

Enabling HTTPS for the Live Server extension in Visual Studio Code is useful when you need to test features like service workers, HTTP/2, or APIs that require a secure connection. By following these steps, you can quickly configure Live Server to use HTTPS.

https://gist.github.com/Edmondi-Kacaj/53be65d06369b9b61a7d8affbb240e40