Set up Vite local dev with the Netlify CLI

Strangely I was able to get netlify functions to work in gatsby, but not localhost:8888 for this project working in vite, could you notify me when you fix this? Thanks.

Strangely I was able to get netlify functions to work in gatsby, but not localhost:8888 for this project working in vite, could you notify me when you fix this? Thanks.

hey, Jason! using some extra context from your email, I'm pretty sure the issue is that another process is running on port 8888 on your machine already

the Netlify CLI will choose a random port if port 8888 is already in use, so I'd guess that you've got another process running on 8888 right now. if you're not sure where that's coming from, it can sometimes be a hung process

you can try this to kill all running node processes:

killall node

if that doesn't work, you can check which process is running at 8888 using this command:

lsof -i :8888

that will give you something like this:

~ on  main [!]
❯ lsof -i :8888
COMMAND   PID  USER   FD   TYPE            DEVICE SIZE/OFF NODE NAME
node    53424 blitz   42u  IPv6 0xc428836cce0a87f      0t0  TCP *:hbci (LISTEN)

you can then kill that process using:

kill -9 53424

note that "53424" in this case is the PID from the previous command — make sure you replace that with the process ID from your own terminal

after killing the process, running netlify dev should start on port 8888 as expected

hope that helps!

Thanks for your reply Jason,

I have already killed those ports and same issue, yes I get the server running, but.... noticed there is no localhost:8888 listed on my terminal (but it was showing on your video):

Briefly checking the DevTools console I saw this:

"Uncaught (in promise) SyntaxError: Unexpected end of JSON input"

So perhaps the promise needs to be caught, however everything I googled with respect to this error output says it's a cors issue, but I don't know how to solve cors issues the correct way.

To verify, I cloned your repo and again, same behavior.

Hey Jason,

I have spent a lot of time trying to figure out how to get your code working and it does not appear to. I am near certain that killing the port is not the solution.

I really want to get your repo working and I'm certain you want others to be able to also.

Please clone a local copy of your repo and verify you can get your repo to run without a DevTools console error:

"VM19:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input at form.tsx? [sm]:19"

This seems to point to line 19.

}).then((res) => res.json());

Much obliged, Jason

And again, localhost:8888 is not opening, nor showing in the terminal when I run

ntl dev

This is not how it appears in your video, so find out why 8888 is not opening.

This second video shows npm i -g netlify-cli and lots of vulnerabilities, 12 moderate and 18 high in your video which you ignored, I too see similar, but less, 16 total and 9 moderate 7 high. Perhaps bc of a node version difference? Could also not be the issue, but wanted to mention it.

Then you run ntl dev

"Server now ready on http://localhost:8888" does not appear

Strangely, I googled this and found a link to you from 2 months ago and it certainly looks related: https://github.com/netlify/cli/issues/3427 which had me consider it might be a netlify-cli version issue, so I attempted installing the version that ehmicky suggested worked for them npm i -g netlify-cli@6.9.28 but again... no dice, still do not get localhost:8888 to open when running ntl dev.

Now I can get netlify to serve the functions on port 8888 with ntl functions:serve -p 8888 and get http://localhost:8888/.netlify/functions/hello-world to now run, but that doesn't solve the issue of the localhost:8888 not POSTing and still get the console error of POST http://localhost:8888/.netlify/functions/submit 404 (Not Found) so it looks like we need to be able to do both commands at the same time?

Perhaps you have some environment variable that I do not?

hey, thanks for posting the additional details!

I just did a fresh clone and everything worked as expected

here's a video of the whole process, starting with the fresh clone

I'm on the latest version of the CLI (8.2.4 currently) and using Node 16:

github.com/jlengstorf/egghead-test on  main  v0.0.0 using ⬢ v16.13.0 took 2s
❯ node -v
v16.13.0

github.com/jlengstorf/egghead-test on  main  v0.0.0 using ⬢ v16.13.0
❯ ntl --version
netlify-cli/8.2.4 darwin-x64 node-v16.13.0

I'm also on macOS 12.0.1

there aren't any environment variables required for this repo, so that shouldn't cause any issues

if this is still causing problems for you, would you mind sharing your env info? here's a command to pull what I'd want to take a look at

npx envinfo --system --binaries --npmPackages netlify-cli --npmGlobalPackages netlify-cli

thanks!

Interesting, it appears that Node: 16.13.0 works while 17.3.0 does not. I would be very much interested in determining what changed, I can poke around the source code but if you have any thoughts or suggestions I'd be glad to hear them.

For reference I was using 17.3.0 bc nvm provided it as the latest stable version of node.

Looks like nvm use stable does not do what one might expect, it uses the most recent node version, in this case "17.3.0 Current Latest Features" not "16.13.1 LTS Recommended For Most Users". I suppose I should update to 16.13.1 as long as that works.