Serve svelte app over https for development environments.

#svelte-https.md

What to do to serve your svelte app over https for development purposes.

Note that this generates a self-signed certificate, which your browser WILL warn you about. For non-production uses, this is perfectly acceptable though.

live reload

You might need to add the generated certificate to your browsers, so the live reload request is not blocked by your browser. Or grab the live reload request form the debugging console and add the exception manually.

For firefox: https://javorszky.co.uk/2019/11/06/get-firefox-to-trust-your-self-signed-certificates/#solve-the-self-signed-cert-thing

gen-certificate.sh

# create key
openssl genrsa -out key.pem
# create signing request
# You need to make sure that CN = 'localhost' when filling out the prompts given
openssl req -new -key key.pem -out csr.pem
# create certificate with signing request
openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem
# remove signing request
rm csr.pem

rollup.config.js.diff

function serve() {
	let server;
	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
-			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {      
+			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev', '-k', '-C', 'path/to/cert.pem', '-K', 'path/to/key.pem'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

-		!production && livereload('public'),
+		!production && livereload({
+			watch: 'public',
+			https: {
+				key: readFileSync('path/to/key.pem'),
+				cert: readFileSync('path/to/cert.pem')
+			}
+		}),