Vite https on localhost

user_4113027 0
Viewed 16350

I'm trying to get https working on my localhost environment for Vite. Chrome shows an invalid certificate error.

I've set up my vite.config.js file like this:

import { defineConfig  } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs';

export default defineConfig({
  resolve: { alias: { '@': '/src' } },
  plugins: [vue()],
  https: {
    key: fs.readFileSync('RootCA-key.pem'),
    cert: fs.readFileSync('RootCA.pem')
  }
})

and when I run npm run dev -- --https it works as expected, I don't get any issues from Vite. However, Chrome shows an invalid certificate.

I used openssl to create the cert files, which gave me .crt, .pem, and .key files. None of them are binary, so I renamed the .key file as RootCA-key.pem. I've tried using the RootCA.pem file as the cert, as well as renaming the RootCA.crt file to RootCA-cert.pem and using that as the cert.

As a temporary work-around, I've enabled insecure localhost in Chrome (chrome://flags/#allow-insecure-localhost), which at least gets rid of the warning.

vite https ssl
4 Answers

Easiest way is to use the vite-plugin-mkcert package.

npm i vite-plugin-mkcert -D

vite.config.js

import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  server: { https: true },
  plugins: [ mkcert() ]
})

When you run the local vite dev server you may be prompted for your password the first time. It will then install a local certificate onto your system and to a number of installed browsers.

Easy!

user_57401810

Maybe it's the key and cert files that are the issue. I am using the mkcert library with the same options and it works fine for me. Moreover, no need to manually trust the certificates.

You can follow these steps:

# Step: 1
# Install mkcert tool - macOS; you can see the mkcert repo for details
brew install mkcert

# Step: 2
# Install nss (only needed if you use Firefox)
brew install nss

# Step: 3
# Setup mkcert on your machine (creates a CA)
mkcert -install

# Step: 4 (Final)
# at the project root directory run the following command
mkdir -p .cert && mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem 'localhost'

And update your vite.config.js with

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import fs from 'fs';

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./.cert/key.pem'),
      cert: fs.readFileSync('./.cert/cert.pem'),
    },
  },
  plugins: [react()],
});

The above steps should solve the HTTPS issue while running yarn dev to start the dev server.

Additional: I use an npm script to make it easy for my team members to create the certificates.

// in package.json
"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview",

    "cert": "rm -rf .cert && mkdir -p .cert && mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem 'localhost'"

  },
user_46177970

The Vite documentation suggest using their official package instead: @vitejs/plugin-basic-ssl

Documentation: https://vitejs.dev/config/server-options.html#server-https

You need to install it with

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

And then use it like this in your vite.config.ts:

import basicSsl from '@vitejs/plugin-basic-ssl'

export default {
  plugins: [
    basicSsl()
  ]
}

⚠️ This if for your dev environment, don't use this on production. You need your own certificate in production (using nginx and let's encrypt for example).

user_77275630
Admin1
Related