run sveltekit dev with https

Question

Is it possible, in development env, to run SvelteKit app with https? I tried to run

npm run dev -- --https  

and vite starts the server successfully:

VITE v3.0.2  ready in 359 ms

  ➜  Local:   https://localhost:5173/
  ➜  Network: [...] 

but i can't connect to https://localhost:5173 chrome says: ERR_SSL_VERSION_OR_CIPHER_MISMATCH

I also tried to edit vite.config.js adding my certificate:

https: {
    key: readFileSync( `${__dirname}/../server/key.pem`),
    cert: readFileSync(`${__dirname}/../server/cert.pem`),
}

and i also tried to use mkcert() following this post:

Vite https on localhost

but it results in the same error

then I tried to use mkcert as plugin:

const config = {
    
    server: {       
        https: true
    },

    plugins: [sveltekit(), mkcert()],

}; 

this time, on first load, it seemed to work, but loading other pages with SvelteKit goto() led to the following different error:

TypeError [ERR_HTTP2_INVALID_CONNECTION_HEADERS]: HTTP/1 Connection specific headers are forbidden: "keep-alive"

Answer 1

Certificate part

Here I suggest you use mkcert for simplicity but you can also generate your certificate using openssl...

install mkcert

brew install mkcert

install a local certificate authority

> 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)! 🦊

create your certificate with mkcert

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

Vite part

update vite.config.js to include your cert files

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`)
        }
    }
});

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`)
        },
        proxy: {}
    }
});

then you should run pnpm run dev and see Local: https://localhost:5173/ in the terminal.

Answer 2

I noticed that add: proxy: {} to vite.config.js solved this problem, but I didn't fully understand why and the consequences of this choice

const config = {
    
    server: {       
        https: true,
        proxy: {} <==
    },

    plugins: [sveltekit(), mkcert()],

};