How do I use my localhost certificate with VS Code

When developing frontend solutions with VS Code, I find standard setups such as B. with Vite that localhost runs without a certificate. Browsers complain about this and you have to explicitly allow it. There is a simple extension that uses a certificate for the "example.com" domain, but the browser complains about that too.

Here I describe how to configure Vite or rather the underlying dev server to run with https on a Windows 11 machine:

1. I assume you already have a localhost certificate. If you don't have one yet, you can find a description of how to create self-signed certificates here. You need to export your localhost certificate using Microsoft Management Console [mmc] and Certificates plugin. Export it as a PFX file with a private key. In the second step choose to export the private key and use the default settings in the next steps. Remember password for step 4!
   
   
2. Install OpenSSL e. G. Win64OpenSSL_Light-3_0_7.msi from https://slproweb.com/products/Win32OpenSSL.html.
   
   
3. Double-click start.bat in C:\Program Files\OpenSSL-Win64 to open an OpenSSL command prompt.
   
   
4. Navigate to the folder of the exported .pfx file and run the following commands:

   cd C:\[PFAD IHRES PFX-EXPORT-ORDNERS]
   
   openssl pkcs12 -in localhost.pfx -out certificate.txt -nodes

5. Open the resulting certificate.txt in a text editor and extract two files:
   
   
6. Copy the section from and including -----BEGIN CERTIFICATE----- to -----END CERTIFICATE----- to the localhost.crt file.
   
   
7. Copy the section from and including -----BEGIN PRIVATE KEY----- to -----END PRIVATE KEY----- to the localhost.key file.
   
   
8. Copy localhost.crt and localhost.key to the cert subfolder of your Vite project.
   
   
9. To be on the safe side, *.crt and *.key files should be included in the .gitignore file so that they do not end up in a repository.
   
   
10. Take a look at vite.config.js for server configuration. The server section is new and crucial:

    import { defineConfig } from 'vite'
    import dns from 'dns'
    import fs from 'fs'
    
    dns.setDefaultResultOrder('verbatim')
    
    export default defineConfig({
      build: {
        lib: {
          ...
        }
      },
      server:{
        https:{
          cert: fs.readFileSync('./cert/localhost.crt'),
          key: fs.readFileSync('./cert/localhost.key')
        }
      }
    })
    

11. In a ReactJS project that was created with npx create-react-app my-app you can e.g. B. use a .env.local file with the following content:
    

    HTTPS=true
    SSL_CRT_FILE=cert\localhost.crt
    SSL_KEY_FILE=cert\localhost.key
    

Aside from the Vite specific vite.config.js file, this approach should be applicable to other types of projects as well.

If an error occurs when copying the content into the .key and .crt files, this will lead to unhelpful error messages when starting the dev server. In this case, check both files again first.