How to serve projects on localhost with SSL?

Hello Everyone,

In this article, I’ll talk about how we can run the projects that you run on localhost with SSL. In addition, I’ll give examples specific to macOS and VSCode.

While I’m using the MKCert library in this process, I will prefer to install it with brew. The MkCert library is one of the libraries used to create an SSL certificate. This library is really simple to use. :)

Let’s install MkCert with the help of Brew:

brew install mkcert

Let’s init the MkCert library:

mkcert -install

SSL certificates are created per domain. I create an SSL certificate and the key for localhost with the following command.

mkcert localhost

You should see the following output:

SSL certificates are ready. Let’s prepare a sample project and update the settings of the LiveServer plugin on VSCode.

When I run our project with the LiveServer plugin, I see that it works in the HTTP protocol as follows.

I add the .vscode folder and settings.json to our project. You can see an example below.

{
  "liveServer.settings.root": "/",
  "liveServer.settings.port": 5501,
  "liveServer.settings.https": {
    "key": "/Users/mstfbiccer/localhost-key.pem",
    "cert": "/Users/mstfbiccer/localhost.pem",
    "enable":true
  }
}

I enable our LiveServer plugin to serve our page from the area that says GoLive or Port:5501 at the bottom right of our VSCode screen.

After following the Advanced -> Proceed to 127.0.0.1 (unsafe) steps, serving over HTTPS is working successfully.

Btw, the error message “Your connection is not private” usually occurs when your browser notices a problem establishing an SSL connection or is unable to verify the certificate. When this error appears, your web browser prevents you from visiting an untrusted website.

I created our certificate for the “localhost” domain. For this reason, it gave an error on 127.0.0.1. I can access it without any problem as below, which I updated to “localhost”.

Thanks for your time...