Browser security policies often mandate the HTTPS protocol to access advanced features like Geolocation or Service Workers during development. While production environments utilize validated certificates, development setups can leverage temporary self-signed credentials using local tools.

Generating Self-Signed Certificates

Utilize mkcert to create a trustworthy Certificate Authority (CA) on your machine.

1. Install mkcert globally:

npm install -g mkcert

2. Create and trust the local root CA:

mkcert -install

3. Generate specific certificates for localhost addresses:

mkcert localhost 127.0.0.1 ::1

This process outputs private keys and certificates required for secure connections. Your opearting system must mark these as trusted root authorities before proceeeding.

Configuring Vite for SSL Support

Install the necessary plugin to enable protocol handling within the build configuration.

npm install -D @vitejs/plugin-basic-ssl

Update your project configuration file (vite.config.js) to import and instantiate the SSL plugin alongside your framework integrations.

import { defineConfig } from 'vite'
import sslPlugin from '@vitejs/plugin-basic-ssl'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react(),
    sslPlugin()
  ],
  server: {
    port: 5174,
    host: true
  }
})

After restarting the dev server, the application will serve traffic over HTTPS. Verify the URL in the terminal output begins with https://. Note that this setup is intended for local development; production deployments should rely on legitimate certificates issued by a recognized Certificate Authority.