CSS may be unavailable in localhost server

[3119369616]

I accessed http://localhost:4321 in Microsoft Edge and saw this:

Isn't it too ugly? I think that CSS may be unavailable.
And here is the console log:

d:\HP\Source
$ git clone https://github.com/ratatui-org/ratatui-website/
Cloning into 'ratatui-website'...
remote: Enumerating objects: 13133, done.
remote: Counting objects: 100% (1384/1384), done.
remote: Compressing objects: 100% (592/592), done.
remote: Total 13133 (delta 986), reused 1081 (delta 788), pack-reused 11749
Receiving objects: 100% (13133/13133), 24.33 MiB | 2.26 MiB/s, done.
Resolving deltas: 100% (9232/9232), done.
Filtering content: 100% (71/71), 33.77 MiB | 2.54 MiB/s, done.

d:\HP\Source
$ cd ratatui-website

d:\HP\Source\ratatui-website
$ git lfs install
Updated Git hooks.
Git LFS initialized.

d:\HP\Source\ratatui-website
$ git lfs pull

d:\HP\Source\ratatui-website
$ npm install
npm warn deprecated puppeteer@18.2.1: < 21.5.0 is no longer supported

$ ratatui.rs@0.0.1 preinstall
$ npx playwright install


$ ratatui.rs@0.0.1 prepare
$ husky install

install command is deprecated

added 818 packages, and audited 819 packages in 30s

280 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

d:\HP\Source\ratatui-website
$ npm run dev

$ ratatui.rs@0.0.1 dev
$ astro dev


astro  v4.8.2 ready in 2375 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

17:06:38 watching for file changes...
17:06:46 [200] / 473ms

No errors occurred but there is one warning:

npm warn deprecated puppeteer@18.2.1: < 21.5.0 is no longer supported

And here are warnings in DevTools:

[kdheepak]

It seems to load correctly for me on MacOS with Firefox:

[3119369616]

I don't have an Apple PC and this problem still exists on Windows with Firefox.

[kdheepak]

I don't have a Windows machine to test. Can you open the console (like your screenshot earlier) and refresh the page and check for errors?

[3119369616]

I don't have a Windows machine to test. Can you open the console (like your screenshot earlier) and refresh the page and check for errors?

I restarted my computer and ran npm run dev again, but no error occurred.

[joshka]

(I also have no windows device to test this with). Can you please open the network tab and hit refresh to see if there's any missing / failing resources?

[3119369616]

(I also have no windows device to test this with). Can you please open the network tab and hit refresh to see if there's any missing / failing resources?

Yes, I did:

I sorted the items by HTTP status codes and I found that the status codes of 3 items are not 200:

I'm not sure whether there is an error or not.

[joshka]

Using Firefox, can you please open the console, clear it (click the trash can button), and then refresh the page.
Take a look and see if you can determine which error (or errors) happen first if there are errors. There should be a bunch of debugging text regardless.

We're not doing anything particularly special in the website code that would obviously impact Windows devices, so I'd like to rule out that it's something oddly configured in your machine or perhaps just a bug in the underlying tech (starlight / astro). As a step in that direction, could you create a starlight test project and see if that works (see https://starlight.astro.build/) for details.

[joshka]

Hey there. A dev on discord confirmed that they can access the site fine on their windows machine

firewallrus: Works fine on windows for me with all the major browsers. I think it's a local setup issue on their end.
firewallrus: Tried with both powershell and old school cmd to be sure
firewallrus: node tooling can be a finicky beast on windows though

Perhaps reinstall the lts version of nodejs and check using that?

[aschey]

It looks like you're running CMD as admin too - that might cause issues with file permissions between your local filesystem and the browser. I'd recommend running everything without admin if possible.

[3119369616]

Perhaps reinstall the lts version of nodejs and check using that?

OK and thanks very much. It's working now: