What's the port that 'vercel dev' command serves the APIs at?

[HunderlineK]

My understanding of how 'dev' command works if there's a corresponding 'dev' script in package.json is that:

a. it runs a proxy server at the port set with '-l' e.g. 5000
b. it sets a $PORT environmental variable e.g. 57456
c. it starts 'dev' script of package.json passing PORT to it

Let's assume my 'routes' field in now.json is empty. Then what happens if I call localhost:5000, all those calls will be proxied to localhost:57456

Let's say I have a webpack dev server running at localhost:57456 which serves the static files and handles routing of my SPA/PWA.

Now, my question is that what is the port that the APIs are served at? If I ping 'localhost:5000/api/my-api' it'll simply be proxied to 'localhost:57456/api/my-api'. I can setup a proxiy on webpack dev server to proxy that to the real API port, but what's that port?

Alternatively, I assume somehow I might be able to set 'routes' in now.json in a way that calls to localhost:5000 are directly sent to my API, but I've tried various configurations and it doesn't seem to work.

If I don't have a 'dev' script and 'vercel dev' serves the static files created by my build script itself, everything works as expected.

Thanks!

[styfle]

When you run vercel dev it will try to run on 3000 unless that port is unavailable, in which case 3001 is used, and so on.

Both the frontend static files and the backend serverless functions are served on the same port, just like in production deployments. So the path for functions is always /api from your frontend.

[HunderlineK]

@styfle Thanks for the response, but that's not entirely correct.

Port 3000 is simply the proxy port when vercel finds a 'dev' script in package.json; you cannot run two different servers at the same port naturally, so what it does is that it runs your 'dev' script at a random port and then proxies calls to 3000 back to that port (which is why you need to make sure you pass $PORT to your 'dev' server so that it runs at that specific port; otherwise, there will be nothing running at the random port for vercel to proxy from 3000 to).

If you enable debugging with --debug you can see e.g.
Proxying to "@vercel/node" dev server (port=61654, pid=21171)

[HunderlineK]

K, I just had a work around and it works:

1. My webpack devServer is running at port 8080
2. I use process.env.PORT as the 'proxy' port of devServer
3. My 'dev' script now starts my devServer

So what's happening now is that if I run 'now dev' it starts my devServer at 8080, it starts "@vercel/node" dev server at $PORT, and then it also starts the proxy at 3000.

Now I can access my devServer at 8080.

I think Vercel dev guides which suggest passing $PORT as the port of your internal devServer/framework are misleading for a completely custom setup; it works for say next.js which is aware of how 'vercel dev' works and is setup to work with it, but not when you're running your own devServer.

---

p.s. The previous work around that I had was to rename 'dev' to another script that's not automatically picked up by Vercel e.g. 'start:dev' and then do 'vercel dev' + 'npm run start:dev' together.

This work around just saves me from having to run two commands, but still :D

[mrmartineau]

FYI I needed to do this method for my new Svelte/Vite app that uses Vercel's serverless functions. I tried @styfle's suggestion but it did not work

[styfle]

Maybe I'm misunderstanding the problem, but your dev command should always look like something develop --port $PORT for example gatsby develop -p $PORT or next -p $PORT.

Can you create a hello world example that fails to follow this behavior?

[HunderlineK]

@styfle Thanks for follow up. I was just about to post! I was running my app off the service worker in offline mode and that's why I thought my workaround was working 🤦

I just reset update vercel to the latest version, used --port $PORT for my dev command and everything works!! Not sure what was the issue before 🤷‍♂️ Thanks!

[Andyloz]

I have a Remix project with Vite.

I have configured my project to run bun run dev and at package.json dev script is remix vite:dev --port $PORT --host 0.0.0.0. That way it worked, but I expect it to work with the default remix vite:dev