Getting 404 on Full-Stack Vite/Node.js app

[hellorayeesrather-gm (Hellorayeesrather Gmailcom)]

Description:

I’m encountering a persistent “404 Not Found” error when deploying my full-stack application on Vercel. My project uses a Vite frontend and a Node.js/Express backend, structured as a monorepo. I’ve followed the Vercel documentation and numerous online resources, but I’m still unable to resolve the issue.

Current vs. Expected Behavior:

• Current Behavior: After deployment, I receive a “404 Not Found” error when accessing the deployed URL. The backend API routes also do not seem to be accessible.
• Expected Behavior: The frontend should be served correctly, and the backend API routes should be accessible.

Code, Configuration, and Steps to Reproduce:

1. Project Structure:

   seo-content-gen-bot/  <-- Root directory
   ├── backend/
   │   └── content-generator-server.js (Express server)
   │   └── package.json (Backend package.json)
   ├── frontend/
   │   ├── src/
   │   │   └── ...
   │   ├── index.html
   │   ├── package.json (Frontend package.json - main field REMOVED)
       |   └── vite.config.js
   ├── dist/             <-- Created by "npm run build" in frontend
   │   ├── index.html
   │   └── ...
   ├── vercel.json
   └── ...
   

2. vite.config.js (frontend):

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     build: {
       outDir: '../dist'
     }
   });
   

3. vercel.json (root):

   {
     "version": 2,
     "builds": [
       { "src": "backend/content-generator-server.js", "use": "@vercel/node" },
       { "src": "dist", "use": "@vercel/static" }
     ],
     "routes": [
       { "src": "/api/(.*)", "dest": "backend/content-generator-server.js" },
       { "src": "/(.*)", "dest": "dist/index.html" }
     ]
   }
   

4. Steps:

   • npm run build is executed in the frontend directory, successfully creating the dist folder in the project root.
   • All changes (including the dist folder and vercel.json) are committed and pushed to GitHub.
   • The project is deployed on Vercel.
   • The “Root Directory” setting in Vercel project settings is set to BLANK.

Project Information:

• Project URL: [Your Vercel deployment URL (if you have one, even if it’s 404ing)]
• Framework: Vite (Frontend), Node.js/Express (Backend)
• Environment: Vercel Production
• Project Settings:
  • Root Directory: BLANK
  • Build Command (Frontend): npm run build
  • Output Directory (Frontend): dist
  • Install Command (Frontend): npm install
• Git Repository: [Your GitHub repository URL]

Additional Information:

• I have verified that the dist folder is correctly created in the root of my project after running npm run build.
• I have double-checked the paths in my vercel.json file.
• I have cleared the Vercel build cache multiple times.
• I have tried creating a new Vercel project and re-importing the repository.
• I have removed the "main" field from my frontend’s package.json.

I’m at a loss as to what could be causing this issue. Any help would be greatly appreciated!

Thanks in advance.

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

If you’re having trouble deploying an Express app, this guide can help.

How to Deploy an Express.js Application to Vercel

You can also ask v0 for suggestions tailored to your own project setup.

[edoda (Emilia)]

I am experiencing the same problem with a basically identical project structure, vite.config.js, and vercel.json.

Did you end up getting your problem figured out?

[anshumanb (Anshuman Bhardwaj)]

Hi @hellorayeesrather-gm and @edodam, welcome to the Vercel Community!

Sorry to see you are facing the issue.

I see that you are using the legacy builds configuration in the vercel.json. I’d recommend removing it. Instead, you need to serve your frontend (React application) and Express app in different Vercel projects.

Here are the resources you can refer to get started:

• How to Deploy a React Site with Vercel
• Using Express.js with Vercel
• Root Directory | Configuring a Build

I hope this helps.

[hellorayeesrather-gm (Hellorayeesrather Gmailcom)]

I didn’t wasted my time further smashing my head why this not working and then i shifted to render and that was easy to host my full stack web application if you need help regarding render send a email to rayeesrather35@gmail.com