Run your Sveltekit (or any vite) localhost server with HTTPS

A simple no-nonsense guide to running your vite-powered localhost server with HTTPS.

Step one - Install MkCert

MkCert is a simple zero-config tool to make locally trusted development certificates with any names you'd like.

On Windows:

Using Chocolatey:

powershell

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

On Mac:

With Homebrew:

bash

brew install mkcert
brew install nss # if you use Firefox

On Linux:

First install certutil:

bash

sudo apt install libnss3-tools # or equivalent for your distro

Then install Homebrew on Linux and run:

bash

brew install mkcert

Step two - Install Local Certificate Authority

Run mkcert -install. You should see a confirmation that the local CA is now installed.

bash

mkcert -install

Step 3 - Create your certificate

Move to your project directory and run:

bash

mkdir cert
cd cert
mkcert -key-file key.pem -cert-file cert.pem localhost

Step 4 - Update your vite config

Include your cert files into your vite config:

javascript

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import fs from 'fs';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    https: {
      key: fs.readFileSync(`${__dirname}/cert/key.pem`),
      cert: fs.readFileSync(`${__dirname}/cert/cert.pem`)
    }
  }
});

Step 5 - Run dev server

Run npm run dev and voila! Your local server is now running on HTTPS.

Happy Hacking!