running svelte dev on https

Question

I'm experimenting with svelte using it's template (https://github.com/sveltejs/template/) as starting point.

And I wanted to scan qr codes with https://github.com/nimiq/qr-scanner, but on my pc I don't have a webcam and my phone doesn't want to start the qrScanner because the page isn't served from https.

when I run npm run dev I get:

  Your application is ready~! 🚀

  - Local:      http://0.0.0.0:5000
  - Network:    http://192.168.1.13:5000

────────────────── LOGS ──────────────────

my rollup.config.js:

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import { string } from "rollup-plugin-string";

const production = !process.env.ROLLUP_WATCH;

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"],
                {
                    stdio: ["ignore", "inherit", "inherit"],
                    shell: true,
                }
            );

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

export default {
    input: "src/main.js",
    output: {
        sourcemap: true,
        format: "iife",
        name: "app",
        file: "public/build/bundle.js",
    },
    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: (css) => {
                css.write("public/build/bundle.css");
            },
        }),
        string({
            include: "node_modules/qr-scanner/qr-scanner-worker.min.js",
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
            browser: true,
            dedupe: ["svelte"],
        }),
        commonjs(),

        // In dev mode, call `npm run start` once
        // the bundle has been generated
        !production && serve(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload("public"),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser(),
    ],
    watch: {
        clearScreen: false,
    },
};

and package json:

{
    "name": "myapp",
    "version": "0.0.1",
    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w",
        "start": "HTTPS=true sirv public --single --host"
    },
    "devDependencies": {
        "@rollup/plugin-commonjs": "^14.0.0",
        "@rollup/plugin-node-resolve": "^8.0.0",
        "rollup": "^2.33.2",
        "rollup-plugin-livereload": "^1.0.0",
        "rollup-plugin-string": "^3.0.0",
        "rollup-plugin-svelte": "^6.1.1",
        "rollup-plugin-terser": "^6.1.0",
        "svelte": "^3.29.7"
    },
    "dependencies": {
        "graphql": "^15.4.0",
        "graphql-request": "^3.3.0",
        "jshashes": "^1.0.8",
        "page.js": "^4.13.3",
        "qr-scanner": "^1.2.0",
        "sirv-cli": "^1.0.8"
    }
}

Blockhead

Answer 1

So I figured it out, svetle-template is served with sirv-cli.

It has arguments: --http2 --cert cert.pem --key key.pem

Blockhead

Answer 2

I have encountered this issue before, the solution was to get chrome/firefox to allow camera access through HTTP

try this answer

alternatively there are tutorial on the web on how to add a certificate for localhost to served on HTTPS

Fariss

This is fine, but qr-scanner has actually code for https checking. So it doesn't work. – Blockhead

Answer 3

The solution I use is mkcert (https://github.com/FiloSottile/mkcert) and then in vite.config.ts read the files and pass the data through to vite:

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

let certKey: string|Buffer|undefined;
let certCert: string|Buffer|undefined;

if (fs.existsSync('./.cert/key.pem')) {
    certKey = fs.readFileSync('./.cert/key.pem');
    certCert =  fs.readFileSync('./.cert/cert.pem');
} else {
    console.log('Missing HTTPS key/cert. You may need to run:  npm run cert');
}

export default defineConfig({
  plugins: [sveltekit()],
    server: {
        https: {
            // See https://mcmap.net/q/194266/-vite-https-on-localhost
            key: certKey,
            cert: certCert,
        },
    },
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}'],
    },
});

A complete working example is here: https://github.com/sdarnell/cf-svelte/

Finsen