dev-resources.site

for different kinds of informations.

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

Published at

8/27/2024

Step one - Install [MkCert]

(https://github.com/FiloSottile/mkcert)
MkCert is a simple zero-config tool to make locally trusted development certificates with any names you'd like.

On Windows:

Using Chocolatey:

@"%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"

If you're using powershell, run this in addition:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Run choco in your terminal to confirm the installation. You should see something like this:

Run this in your terminal to scaffold a new sveltekit project

On Mac:
With Homebrew:

brew install mkcert
brew install nss # if you use Firefox

With MacPorts

sudo port selfupdate
sudo port install mkcert
sudo port install nss # if you use Firefox

On Linux
First install certutil:

sudo apt install libnss3-tools
    -or-
sudo yum install nss-tools
    -or-
sudo pacman -S nss
    -or-
sudo zypper install mozilla-nss-tools

Then install Homebrew on Linux:

test -d ~/.linuxbrew && eval "$(~/.linuxbrew/bin/brew shellenv)"
test -d /home/linuxbrew/.linuxbrew && eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"
echo "eval \"\$($(brew --prefix)/bin/brew shellenv)\"" >> ~/.bashrc

Install mkcert using Homebrew on Linux

brew install mkcert

For Arch Linux users, mkcert is available on the official Arch Linux repository:

sudo pacman -Syu mkcert

Step two - Install Local Cerificate Authority

Run mkcert -install. You should see something like this.

> mkcert -install
Created a new local CA 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

Step 3 - Create your certificate with mkcert:
You can move to your project directory and remove 'your_project' from the commands below:

mkdir your_project/cert
cd your_project/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:

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

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

Step 5 - Run dev server
Run npm run dev or pnpn run dev or whatever you deem fit and voila: