Using HTTPS with SvelteKit

2024-12-26

When you need access to https while doing development you can set up a certificate and have the sveltekit dev server serve it out.

Use mkcert to create the certificates. mkcert can also install it into the browser so that https://localhost:port will work without a prompt.

In the project directory, do the following:

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

This will create the certificates under the cert directory. Add this to the .gitignore.

Update vite.config.js:

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

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

Now when you do npm run dev you should see that the project is being server over https. When you open the app in the browser, it will then prompt you to accept the untrusted certificate if you use the IP.

To install the root certificate for mkcert:

mkcert -install

This should let you open localhost without the untrusted prompt.

References

https://stackoverflow.com/questions/73205096/run-sveltekit-dev-with-https