With my Power Pages project I plan to use Service Worker API to pre-fetch/update the data for better user experience.

Service workers only run over HTTPS protocol but on local host they will also work over HTTP. However, I would like set up the HTTPS on my local host for further use.

I use Live Server VS Code extension. Let's enable the https.

Steps in short:

1. Generate a certificate.
2. Validate it on mac and windows.
3. Enable https in Live Server.

Generate certificate on Mac

I will be creating certificate on Mac where openssl is provided by default.

I also reference this Microsoft guide for node.js with MSAL daemon app with some modifications.

I will use openssl req command with:

• -x509 -> public key format
• -rsa 2048 -> key crypto system
• -days 3650 -> expiration in days
• -batch -> skip interactive q&a for some params

More explained on docs.openssl.org/master/man1/openssl-req.

Note on Mac's terminal:

• ctrl + z to terminate the command to start again
• open . to open current folder in Finder

Open terminal on Mac -> create folder mkdir certs and cd certs -> create folder with name certs -> type in the terminal the following command:

openssl req -batch -x509 -newkey rsa:2048 -keyout cert.key -out cert.crt\
    -subj "/C=NO/ST=Baerum/L=Lysaker/O=MyDevOrg ASA/CN=cert"\
    -addext "subjectAltName=DNS:example.com,DNS:*.example.com,IP:127.0.0.1,DNS:localhost"\
    -days 3650

Note: IP:127.0.0.1 and DNS:localhost will make this certificate valid for these URLs only.

Enter PEM pass phrase 2255 or any other value and click Enter -> repeat the phrase -> Done

Two files are now available in folder certs:

• cert.key -> public key (certificate)
• cert.crt -> private key encrypted with a pass phrase

Trust the certificate on Mac

Open certs folder in Finder (use command open . if still in terminal) -> open file cert.crt.

Keychain Access app will open and you will see a new certificate with name cert (ref. CN= param from above).

This will have a red cross and mark This certificate is not trusted.

Double click this certificate -> expand Trust -> select in When using this certificate: Always Trust -> click Close -> type your system user password -> Done.

Not this certificate is trusted on your Mac's user.

Trust the certificate on Windows

Transfer your .vscode and certs directories with contents to your Windows machine.

Double click on the cert.crt file -> the Certificate window will open -> click Install Certificate... -> select Current User -> select Place all certificates in the following store -> click Browse -> select Trusted Root Certification Authorities -> OK -> Next -> Finish -> message appears:

You are about to install a certificate from 
a certification authority (CA) claiming to 
represent:

cert

bla bla bla...

Click Yes -> a message from Certificate Import Wizard will notify that The import was successful.

Add the certificate to VS Code's project

Copy folder certs in Finder -> open your project in VS Code -> cmd+v to paste the copied folder in the VS Code.

Add https settings in Live Server

Create folder with name .vscode -> inside that create a file with name settings.json -> add the following code in that file:

On Mac

{
    "liveServer.settings.https": {
        // to get path to files, in VS Code right click the file
        // select Copy Path. You need full path, not relative
        "enable":true,
        "cert": "/Users/<copy-your-path-here>/certs/cert.crt",
        "key": "/Users/<copy-your-path-here>/certs/cert.key",
        "passphrase": "2255"
    },
    "liveServer.settings.port": 5500 // add fixed port for your project
}

On Windows

Note: the slash in path shall be / and not \, so after Copy Path in VS Code you would need to replace all accordingly, otherwise the path will not be valid.

{
    "liveServer.settings.https": {
        "enable":true,
        "cert": "C:/Users/<copy-your-path-here>/certs/cert.crt",
        "key": "C:/Users/<copy-your-path-here>/certs/cert.key",
        "passphrase": "2255"
    },
    "liveServer.settings.port": 5500
}

Now you can verify that both https://127.0.0.1:5500/ and https://localhost:5500/ are valid.

PS. Sometimes after changes you would need to reload Chrome/Brave to reconnect the updated certificate. To do this quickly type in the URL bar chrome://restart -> Enter.