@vitejs/plugin-basic-ssl

Import basicSsl and add it to the plugins array in your Vite configuration. This plugin generates self-signed certificates that allow HTTPS access after bypassing the browser's initial security warning.

// vite.config.js
import basicSsl from '@vitejs/plugin-basic-ssl'

export default {
  plugins: [
    basicSsl({
      /** name of certification */
      name: 'test',
      /** custom trust domains */
      domains: ['*.custom.com'],
      /** optional, days before certificate expires */
      ttlDays: 30,
      /** custom certification directory */
      certDir: '/Users/.../.devServer/cert',
    }),
  ],
}

Install the plugin via npm to enable automatic generation of untrusted SSL certificates for your Vite development server. This allows you to access your site over HTTPS by proceeding past the browser's security warning.

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

The basicSsl plugin accepts an options object to customize the generated certificate:

• name: The name of the certification.
• domains: An array of custom trust domains (e.g., ['*.custom.com']).
• ttlDays: (Optional) The number of days before the certificate expires.
• certDir: (Optional) The directory where the custom certificates will be stored.

You can pass a partial Options object to viteBasicSslPlugin to customize certificate generation and storage:

• certDir: The directory where the certificate file (_cert.pem) will be stored. If not provided, it defaults to [config.cacheDir or node_modules/.vite]/basic-ssl.
• domains: An array of domain names to include in the certificate's Subject Alternative Names (SAN).
• name: The name/common name for the certificate.
• ttlDays: The number of days for which the certificate is valid.

viteBasicSslPlugin({
  certDir: './certs',
  domains: ['localhost', 'example.local'],
  name: 'my-local-dev',
  ttlDays: 365
})

The getCertificate function allows you to manually retrieve a certificate string. It attempts to read a valid, non-expired certificate from the specified cacheDir. If the certificate is missing or expired, it generates a new one using the provided parameters and saves it to the cache directory.

Parameters:

• cacheDir: The directory to look for or save the _cert.pem file.
• name (optional): The name for the certificate.
• domains (optional): An array of domains for the certificate.
• ttlDays (optional): Validity period in days.

import { getCertificate } from '@vitejs/plugin-basic-ssl'

const cert = await getCertificate('./my-cache', 'localhost', ['localhost'], 365)

The viteBasicSslPlugin is a Vite plugin that automatically generates and manages untrusted SSL certificates for your local development server and preview server. When used, it automatically configures config.server.https and config.preview.https with the generated certificate and key.

By default, certificates are cached in node_modules/.vite/basic-ssl to avoid regenerating them on every restart.

import { viteBasicSslPlugin } from '@vitejs/plugin-basic-ssl'

export default {
  plugins: [
    viteBasicSslPlugin()
  ]
}