Svelte dev on https doesn't detect changes
peshoicov opened this issue · comments
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
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 🙂
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.
@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?