Vite https on localhost

Question

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.

Answer 1

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!

Answer 2

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

npm 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).

Answer 3

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'"

  },

Answer 4

Daniel Elkington's answer above worked like a charm for me on macOS. However it did not work for me for a Vue/Vite inside a Docker container.

This approach below worked for me (both on macOS and inside a Docker container):

Got things working (by re-)using key and cert files I'd generated for localhost using mkcert, e.g.:

// vite.config.js
import { fileURLToPath, URL } from "node:url";

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

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: {
      key: '/path/to/some_folder/ssl/SSLforMyHosts-key.pem',
      cert: '/path/to/some_folder/ssl/SSLforMyHosts-certificate.pem',
    }
  },
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

The key and cert files were generated for localhost (and more test domains for local development) using mkcert, with this command:

cd /Users/your_name/some_folder/ssl
mkcert \
  -cert-file SSLforMyHosts-certificate.pem -key-file SSLforMyHosts-key.pem \
  localhost 127.0.0.1 ::1 \
  some-other-local-dev-site.localhost \
  example.localhost

See also: answer about installing self-signed certificate.

Answer 5

As an alternative solution, the answer in this post explains how to add the CA and cert to the server and to the browser: Getting Chrome to accept self-signed localhost certificate

For your vite config refer to Vite Docs - server.https, you would only need something like this:

server: {
    https: true
  }

or You could do it from the command line like this:

vite --https

or

npm run dev -- --https

Answer 6

if you have created local certificate using mkcert then you can use the following config:

vite.config.js (using vue@3)

Remember to change the certificate filename if you intend to copypase the code.

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import fs from 'fs';
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: {
            key:  fs.readFileSync("../localhost+2-key.pem"),
            cert: fs.readFileSync("../localhost+2.pem"),
            ca: fs.readFileSync("../.local/share/mkcert/rootCA.pem")

        },
      port: 8080
},
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})