How to fix 404 error when deploying Node.js backend on Vercel with Vue frontend on Netlify?

Question

I have split my Vue.js project into two parts:

The frontend is a Vue app, which I successfully deployed to Netlify, and it works fine.
The backend is a simple Node.js + Express server that I want to deploy to Vercel.

Inside the backend folder, I created a vercel.json file with the following content:

{
  "version": 2,
  "builds": [
    {
      "src": "backend/server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "backend/server.js"
    }
  ]
}

I pushed everything to GitHub and then connected the repository to Vercel. The deployment finishes without build errors, but when I open the backend URL in the browser, I only get:

404: NOT_FOUND
Code: NOT_FOUND

What I have tried so far:

Placing vercel.json inside the backend folder.
Moving vercel.json to the project root.
Changing the src path from backend/server.js to just server.js.
Redeploying multiple times.

You need to provide additional information so I can help you out, if everything deployed fine… there’s a likelihood that the route you’re trying to access is not a GET route, the browser can only display GET routes. If you want to test your API endpoints you might want to consider Insomnia or Postman apps. — Melvin Kosisochukwu
– Melvin Kosisochukwu, Commented Sep 8 at 20:26

nayemalways · Accepted Answer · 2025-09-08 20:38:29Z

0

If your folder structure is like that:

-backend
   -server.js
-vercel.

Now, your Vercel config should be:

{
  "version": 2,
  "builds": [
    {
      "src": "backend/server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "backend/server.js"
    }
  ]
}

Now again, try to deploy. If it's still the same, try to deploy using CLI

CLI method:

Install Vercel globally
```
npm i -g vercel 
```
2. Login using Vercel credentials:
```
vercel login
```
3. After successful login, run this command to deploy:
```
vercel --prod
```
4. Then, skip with hitting enter:
```
Vercel CLI 24.x.x
? Set up and deploy “your-project-folder”? [Y/n] 
```
5. Skip again if you haven't existing project with the same name as your local folder on vercel:
```
 ? Link to existing project? [y/N]
```
6. Now you can set your project name or you can skip again. If you skip, it will take your default root folder name as project name:
```
? What’s your project’s name? my-backend
```
7 Which directory you want to deploy? skip it dont' touch. Just hit enter:
```
? Which directory is your code located in? ./
```
8. Framework detection (Skip again) hit enter:
```
? Want to override the settings? [y/N]
```
After doing this, you will see your project will be deploying and generate inspect link. You can see your real-time deploy logs on vercel by clicking on inspect link.

And boom it will deploy when your folder structure are correct! (I deployed a backend today by following this way)

answered Sep 8 at 20:38

nayemalways

1515 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Haitam Jebari Sep 8 at 23:39

to be more specific i wanted to deploy just the backend the frontend is on netlify when i do all the things that you said it doesnt work either

Collectives™ on Stack Overflow

How to fix 404 error when deploying Node.js backend on Vercel with Vue frontend on Netlify?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related