dev-resources.site
for different kinds of informations.
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]
(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:
Happy Hacking!
PS: Relevant docs
PS2: How to change your sveltekit (or any vite-powered) dev server port.
Featured ones: