HTTPS ​

Sometimes you need to test web features that are only available in secure context. This section covers how to setup https in selected tools with a certificate.

This page is partially adopted from https://oak.dev/2021/02/03/create-a-self-signed-certificate-on-windows-for-local-development/#:~:text=Create a Self-signed Certificate on Windows for Local,and key ... 5 Step 5%3A Test

Create a Certificate ​

Follow these steps to create a self-signed certificate on the Windows Host and send it to the VM

Vite ​

To use https in vite dev server, follow the following steps. You should have openssl already installed.

Run the following. Replace cert.pfx with the path of the certificate. Also change the output paths if needed.

openssl pkcs12 -in cert.pfx -nocerts -out cert-key.pem -nodes
openssl pkcs12 -in cert.pfx -nokeys -out cert.pem

openssl pkcs12 -in cert.pfx -nocerts -out cert-key.pem -nodes
openssl pkcs12 -in cert.pfx -nokeys -out cert.pem

Enter the password you made when exporting the certificate when prompted.

Now add the server.https option to vite.config.ts

export default defineConfig({
  server: {
    https: {
      key: '/path/to/cert-key.pem',
      cert: '/path/to/cert.pem',
    }
  },
  plugins: [
    ...
  ],
  resolve: {
    ...
  },
});

export default defineConfig({
  server: {
    https: {
      key: '/path/to/cert-key.pem',
      cert: '/path/to/cert.pem',
    }
  },
  plugins: [
    ...
  ],
  resolve: {
    ...
  },
});

Run npm run dev -- --host, and the console should give you https urls.

In your host, go to https://<domain>:5173 and you should see the browser is happy with the certificate.

Finally open the devtool and type isSecureContext in the console. It should be true.