Next.js Discord

Discord Forum

how to debug api endpoint giving 404?

Unanswered
.T posted this in #help-forum
Open in Discord
.TOP
i tried to convert my simple express proxy server to serverless vercel code. i made the static file serving work. for somereason i can not get any endpoint to work. everything gives 404. build logs and details shows i have the functions at the right place api/test but i cant access them on the browser (url.com/api/test or url.com/test). i tried fixing it for like 3 hours. completely started from scratch once. now i want some human ideas.

my project structure
api
-test.ts
public
-index.html
vercel.json

test.ts
import { VercelRequest, VercelResponse } from '@vercel/node';
export default function handler(req: VercelRequest, res: VercelResponse) {
    res.status(200).json({ message: 'Hello' });
}

vercel.json
{
    "build": {
        "env": {
            "NODE_ENV": "production"
        }
    },
    "installCommand": "corepack enable && corepack prepare pnpm@10.0.0 --activate && pnpm install",
    "builds": [
        {
            "src": "public/**",
            "use": "@vercel/static"
        },
        {
            "src": "api/**/*.ts",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/",
            "dest": "/public/index.html"
        },
        {
            "src": "/api/(.*)",
            "dest": "/api/$1"
        }
    ]
}

im assuming tsconfig.json can't cause any issues right? i did some fiddling with it but idk


do i have to specify each endpoint in the routes with that format? i thought it would be automatic. (tbh both didnt work)

I've tried in both local and production environments (both in hosted version and local vercel-cli version)

32 Replies

.TOP
I have only done serverless conversions with JS once before and was pretty straight forward
so like..
hm
is this a compiled file location problem
i was told to not worry about their existence when working with vercel dev
@.T i tried to convert my simple express proxy server to serverless vercel code. i made the static file serving work. for somereason i can not get any endpoint to work. everything gives 404. build logs and details shows i have the functions at the right place `api/test` but i cant access them on the browser (url.com/api/test or url.com/test). i tried fixing it for like 3 hours. completely started from scratch once. now i want some human ideas. my project structure api -test.ts public -index.html vercel.json test.ts ts import { VercelRequest, VercelResponse } from '@vercel/node'; export default function handler(req: VercelRequest, res: VercelResponse) { res.status(200).json({ message: 'Hello' }); } vercel.json json { "build": { "env": { "NODE_ENV": "production" } }, "installCommand": "corepack enable && corepack prepare pnpm@10.0.0 --activate && pnpm install", "builds": [ { "src": "public/**", "use": "@vercel/static" }, { "src": "api/**/*.ts", "use": "@vercel/node" } ], "routes": [ { "src": "/", "dest": "/public/index.html" }, { "src": "/api/(.*)", "dest": "/api/$1" } ] } im assuming tsconfig.json can't cause any issues right? i did some fiddling with it but idk do i have to specify each endpoint in the routes with that format? i thought it would be automatic. (tbh both didnt work) I've tried in both local and production environments (both in hosted version and local vercel-cli version)
joulev
uhm pretty sure you don't need that vercel.json. vercel automatically understands api and public.

api/
  test.js
public/
  index.html

just this, no vercel.json, worked just fine for me, can access the html file at / and can access /api/test for the test.js file. didn't try .ts but pretty sure it won't be much different.
(the deployments will be taken down in a couple days)
entire project is just these two files
@joulev entire project is just these two files
.TOP
can you do a one with ts?
this is how my code looks like and i get 404 at the test page
let me try without any vercel json as you suggested
wow bruh
you are right. it just worked
what the issue here? the pnpm bs? imma check it
@.T what the issue here? the pnpm bs? imma check it
joulev
no the issue is your vercel.json, it overrides the vercel default, and since your vercel.json is buggy somewhere, vercel misunderstands things and didn't put a route where you want it
since here you are not relying on any custom behaviours – vercel understands api and public automatically – vercel.json is not required because you don't need to alter any default behaviour
when that happens, having it does more harm than good
.TOP
im unable to use vercel local development because of pnpm tho
> Creating initial build
Detected `pnpm-lock.yaml` 9 which may be generated by pnpm@9.x or pnpm@10.x
Using pnpm@9.x based on project creation date
To use pnpm@10.x, manually opt in using corepack (https://vercel.com/docs/deployments/configure-a-build#corepack)
'yarn' is not recognized as an internal or external command,
operable program or batch file.
(i dont have yarn installed)
ok google says it sohuld support pnpm v10 but idk
joulev
just add the packageManager field to your package.json
.TOP
it exist. i think i need to delete the .vercel folder so when i initialize, it works with pnpm10. website says something like that.

New projects with a pnpm-lock.yaml file with lockfileVersion: '9.0' will automatically use pnpm v10 for Install and Build Commands. Existing projects will continue to use pnpm v9 for backwards compatibility, since pnpm v9 also uses lockfileVersion: '9.0'

tho i dont think this project was initialized that much old
joulev
my guess is you have a yarn.lock file, remove it
if not there is no reason for vercel cli to think you are using yarn
.TOP
i dont have yarn.lock file. ive never installed or used yarn before.
@joulev is it possible for you to test this branch for vercel local development? https://github.com/clod44/proxy/tree/fix-vercel-local
if it doesnt give that yarn error its fine
.TOP
okay nvm i did some fiddling and 
Vercel CLI 41.7.2
> Creating initial build
Detected `pnpm-lock.yaml` 9 which may be generated by pnpm@9.x or pnpm@10.x
Using pnpm@9.x based on project creation date
To use pnpm@10.x, manually opt in using corepack (https://vercel.com/docs/deployments/configure-a-build#corepack)
Running "pnpm run build"

> proxy@1.0.0 build C:\Users\Rt_Sa\DEV\proxy
> tsc

> Success! Build completed
> Ready! Available at http://localhost:3000

at least it doesnt whine about yarn now and works
joulev
Nice, glad it’s working