Svelte dev on https doesn't detect changes

[peshoicov]

Describe the bug

I'm running Svelte dev on https locally.

First - generated the key.pem and cert.pem with openssl command (used the example in sirv-cli page in npm). Then - I set these commands in package.json:

  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "HOST=0.0.0.0 sirv public --no-clear --port 443 --http2 --cert cert.pem --key key.pem"
  },

And so - I'm able to open my project on https. In my case - on https://example.com.

(I need to use https because our APIs will reject the requests if I don't use https.)

The problem is that now when I make a change in some file in src/ - nothing changes in the browser. I have to do a refresh in the browser and only then I'll see the new code.

Any idea what I'm doing wrong? Or something I need to add maybe?

Reproduction

In package.json you can set

    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "HOST=0.0.0.0 sirv public --no-clear --port 443 --http2 --cert cert.pem --key key.pem"
  },

and run npm run dev. I have to do it as super user, otherwise I get error that the port is taken.

(I tried sudo npm run dev - but then I get:

glob error [Error: EACCES: permission denied, scandir '/root/.npm/_logs'] {
  errno: -13,
  code: 'EACCES',
  syscall: 'scandir',
  path: '/root/.npm/_logs'
}

but on your end using sudo may be enough.)

Logs

No response

System Info

System:
    OS: Linux 5.14 openSUSE Tumbleweed 20211107
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
    Memory: 3.76 GB / 15.06 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 7.12.1 - ~/.npm-packages/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 93.0
  npmPackages:
    rollup: ^2.3.4 => 2.59.0 
    svelte: ^3.0.0 => 3.44.1

Severity

blocking all usage of svelte

[peshoicov]

I ended up with using svelte-webpack template - https://github.com/sveltejs/template-webpack. When I run this with https - then the changes of files reflect in the browser.

(For setting Webpack to work with HTTPS I used this tutorial - https://bleext.com/post/how-to-enable-https-on-webpack-dev-server - and for the certificate files - cert and key - I used the two .pem files from my initial post above.)

---

@Rich-Harris - I think having this ability in the original svelte template will be wonderful 🙂

[Conduitry]

When running the default npm run dev command, sirv is started with --dev (https://github.com/lukeed/sirv/tree/master/packages/sirv#optsdev) which picks up changes to the files on disk, as opposed to caching them in memory on first request in production mode. Your invocation of sirv would need to do the same.

[peshoicov]

@Conduitry - thank you for the info.

I tried with adding the --dev to the sirv command - but got the same result. I played a bit more - and then I noticed that actually a new build is triggered, but the thing is that the browser doesn't react to it.

So - I thought it could be problem with my app.
Thus - I decided to dig more into this and I created a brand new project. Modified the package.json file, ran npm run dev and opened the page with https, made changes in App.svelte, saved the file - then the build got triggered - but the browser doesn't automatically pick the new version ... 😞

So - can we re-open the bug ? ... Or probably log a bug in sirv directly?