Skip to content
This repository has been archived by the owner on Feb 15, 2023. It is now read-only.

localhost:5000 doesn't work after running npm run dev #184

Closed
ApplePieGiraffe opened this issue Nov 17, 2020 · 21 comments · Fixed by #278
Closed

localhost:5000 doesn't work after running npm run dev #184

ApplePieGiraffe opened this issue Nov 17, 2020 · 21 comments · Fixed by #278
Labels
question

Comments

@ApplePieGiraffe
Copy link

Hi, there.

I'm new to Svelte, and I've been trying to follow the "Svelte for new developers" blog article on Svelte's website to set up a new Svelte project.

After carefully following all of the instructions and running npm run dev, I receive the expected output in the terminal but when I navigate to http://localhost:5000/ in my browser (Chrome), I'm met with the message "This site can’t be reached."

I've followed the tutorial many times and the only thing that's helped is this StackOverflow answer that tells me to "declare the environment variable HOST=0.0.0.0."

Running npm run dev works after that, but Chrome tells me the site I'm on is not secure.

I'm just wondering why http://localhost:5000/ just isn't working for me and if there's anything I can do to simply set up my project the way the tutorial teaches.
@Conduitry Conduitry transferred this issue from sveltejs/svelte Nov 17, 2020
@lukeed
Copy link
Member

lukeed commented Nov 17, 2020

It sounds like you may be using a VM?
Pure localhost is private access, so wherever your npm run dev is being invoked isn't accessible by your main OS.

HOST=0.0.0.0 or --host 0.0.0.0 works because it spawns a server that is public and accessible to the network. This is fine if you're at home/on a private network, but could be a security issue at coffee shops, airports, etc. That's why it's private (secure) by default.

@ApplePieGiraffe
Copy link
Author

Hmm... I'm not using a VM.

I just tried accessing localhost:5000 in a few other browsers, and for some reason, it worked in Firefox. Chrome, Safari, and Edge all say something along the lines of "This site can’t be reached." Do you have any idea what's up with that?

@hydrothas
Copy link

Same here. Svelte doesn't seem to work well with mac. Tried it 4 months ago, and about 3 months before that. It just doesn't work well on mac.

Everytime had an issue. What version should all the tools be? Node, npm, etc.

@hydrothas
Copy link

image

Ok, so it breaks if I use NPM, it works if use yarn instead (no idea why, in my experience npm beats yarn every time with stability and reliability). Please do take this issue seriously, reason is this causes svelte's bounce rate to sky rocket if the hello world doesn't work (on the main page!). Trying a bit more complex stuff now, last time Svelte bombed when adding just a basic theme.

This isn't the first time I experienced the issue. Every few months I try Svelte to see if the hello world actually works. If a tool's hello world breaks, it gives little hope to continue further. Theoretically on paper Svelte is brilliant and that is why I keep coming back. I want a replacement for React.js (and also want to drop yarn). I suspect Svelte can be a lot bigger if this small issue is fixed. Will take a look later at this issue once I have the time to invest (beauty of open source).

So for now, solution is to use:
yarn
yarn run dev

(Yarn version is 1.18.0 at time of comment).

@Zajozor
Copy link

Zajozor commented Mar 8, 2021

I have the same issue. Using 127.0.0.1 instead of localhost seems to fix this.

Steps to reproduce:

  • Mac OS 11
  • Svelte 3.35.0
npm run dev
  • curl response:
$ curl localhost:5000
curl: (1) Received HTTP/0.9 when not allowed

$ curl 127.0.0.1:5000
<!DOCTYPE html>
<html lang="en">
... (omitted the rest)

  • Firefox opens the page successfully (as reported above)

  • Chrome shows ERR_INVALID_HTTP_RESPONSE

  • If you use HOST=localhost npm run dev or HOST=127.0.0.1 npm run dev it does not change behaviour

  • If you use 127.0.0.1:5000 (instead of localhost) it works fine in all browsers

Strange but not a dealbreaker. If more info is needed let me know :)

@katsully
Copy link

Having a similar problem.
I downloaded the svelte-app.zip from https://svelte.dev/repl/hello-world?version=3.38.2, ran npm install, and then ran npm dev run
This all worked fine.
But when I access localhost:5000, inside VS Code, I get the error

\node_modules\sirv\build.js:163
let pathname = req.path || parser(req, true).pathname;
^

TypeError: parser is not a function

and the browser says "This site can't be reached"
I tried Chrome & Firefox, localhost & 127.0.0.1 and still getting the same results

@lukeed
Copy link
Member

lukeed commented May 24, 2021

@katsully Please update to the latest sirv/sirv-cli which went out a few minutes ago.

@katsully
Copy link

Thank you!!

@Nomzy-kush
Copy link

Hello, my npm run dev keeps showing me errors. Please what can I do?

@tnaseem
Copy link

tnaseem commented Nov 1, 2021

I'm running on an M1 Mac (macOS Monterey 12.0.1)...

I've just started having a dabble in Svelte and tried the template project, and I was getting an 'Access to localhost was denied' page in Chrome (Error 403), but as @Zajozor mentioned, http://127.0.0.1:5000 works fine though.

After further digging, I found a post on Reddit about port 5000 being taken by Airplay Receiver. Disabling this in System Preferences->Sharing->AirPlay Receiver, seems to do the trick (ie. http://localhost:5000 now works).

Still confused as to why 127.0.0.1 would work before, but not localhost!

@Kiosak
Copy link

Kiosak commented Nov 3, 2021

@tnaseem Thank you!
This solution works.

@bryik
Copy link

bryik commented Nov 4, 2021

Also on a Mac and same issue as @tnaseem.

Airplay Receiver taking port 5000 sounds plausible. Having sirv use a different port fixed the issue for me.

In package.json:

{
  "scripts": {
    "start": "sirv public --single --port 5555",
  }
}

Now http://localhost:5555 works as http://localhost:5000 once did.

@yavuzinc
Copy link

yavuzinc commented Nov 12, 2021 •
edited

This solution works for m1 monterey. Thank you @bryik.

@kresnasatya
Copy link

I'm running on an M1 Mac (macOS Monterey 12.0.1)...

I've just started having a dabble in Svelte and tried the template project, and I was getting an 'Access to localhost was denied' page in Chrome (Error 403), but as @Zajozor mentioned, http://127.0.0.1:5000 works fine though.

After further digging, I found a post on Reddit about port 5000 being taken by Airplay Receiver. Disabling this in System Preferences->Sharing->AirPlay Receiver, seems to do the trick (ie. http://localhost:5000 now works).

Still confused as to why 127.0.0.1 would work before, but not localhost!

I'm also using M1 macOS Monterey 12.0.1 and facing this issue. Thanks for your information so I can change the port of host beside 5000 as @bryik mentioned.

"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public --no-clear --port 8080"
},

@platypusjones platypusjones mentioned this issue Nov 19, 2021
Closed
@platypusjones
Copy link

Just came across this when starting from the template for a quick prototype project.

This is going to happen by default to a lot of MacOS Monterey users because the Airplay receiver service blocks ports 5000 unless disabled. Ultimately from an onboarding perspective this will be a bit of a hassle if someone runs into it, especially on a template, which may be used by someone new to svelte or even new to javascript.

I Just raised the question in the Sirv repo as well:
lukeed/sirv#124

I'm thinking it should maybe at least be documented in the template repo?

@bodike-pilot
Copy link

I'm running on an M1 Mac (macOS Monterey 12.0.1)...

I've just started having a dabble in Svelte and tried the template project, and I was getting an 'Access to localhost was denied' page in Chrome (Error 403), but as @Zajozor mentioned, http://127.0.0.1:5000 works fine though.

After further digging, I found a post on Reddit about port 5000 being taken by Airplay Receiver. Disabling this in System Preferences->Sharing->AirPlay Receiver, seems to do the trick (ie. http://localhost:5000 now works).

Still confused as to why 127.0.0.1 would work before, but not localhost!

Worked like a charm, thanks.

@sunwoo0706 sunwoo0706 mentioned this issue Dec 1, 2021
Merged
@tututwo
Copy link

tututwo commented Dec 7, 2021

I'm running on an M1 Mac (macOS Monterey 12.0.1)...

I've just started having a dabble in Svelte and tried the template project, and I was getting an 'Access to localhost was denied' page in Chrome (Error 403), but as @Zajozor mentioned, http://127.0.0.1:5000 works fine though.

After further digging, I found a post on Reddit about port 5000 being taken by Airplay Receiver. Disabling this in System Preferences->Sharing->AirPlay Receiver, seems to do the trick (ie. http://localhost:5000 now works).

Still confused as to why 127.0.0.1 would work before, but not localhost!

Savior of the day

@wangz-code
Copy link

@tnaseem it work Thank you!

@NikitaMazur
Copy link

If you don't want to disable Airplay - you can just change port, for example, for 4000 :)
PORT=4000 yarn dev

@Download Download mentioned this issue Dec 26, 2021
Closed
@codrone
Copy link

codrone commented Dec 27, 2021

looks like the issue is with macOS Monterey 12.0.1)
it was working before I updated.
turning off airplay receiver helped

lukeed added a commit that referenced this issue Dec 29, 2021
@lukeed
chore: bump sirv-cli version;
6638809 
- Closes #181
- Closes #184
- Closes #277
@lukeed lukeed mentioned this issue Dec 29, 2021
Merged
Rich-Harris pushed a commit that referenced this issue Jan 6, 2022
@lukeed
chore: bump sirv-cli version; (#278)
8d350b6 
* chore: bump `sirv-cli` version;

- Closes #181
- Closes #184
- Closes #277

* chore: update readme port
@codrone
Copy link

codrone commented Jan 6, 2022 via email

nvlgzr added a commit to nvlgzr/fngrng that referenced this issue Feb 2, 2022
@nvlgzr
Updated sirv to get around this issue new, Mac-only:
9d5cf80 
sveltejs/template#184
@dlschmidt dlschmidt mentioned this issue Feb 22, 2022
Merged
@freakboy3742 freakboy3742 mentioned this issue Apr 1, 2022
Merged
tjvantoll added a commit to blues/airnote.live that referenced this issue May 25, 2022
@tjvantoll
fix: switching to port 5555 for macOS development
4d0638f 
Working around sveltejs/template#184
@tjvantoll tjvantoll mentioned this issue May 25, 2022
Merged
tjvantoll added a commit to blues/airnote.live that referenced this issue May 25, 2022
@tjvantoll
fix: switching to port 5555 for macOS development
c83fd88 
Working around sveltejs/template#184
@ajcwebdev ajcwebdev mentioned this issue Aug 27, 2022
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore: bump sirv-cli version; sveltejs/template