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.

https://community.vercel.com/t/debugging-404-errors/437

Vercel Community

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...

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

Hi @shayokhshorfuddin, welcome to the Vercel Community!

Sorry that you're facing this issue. Can you share what is the project structure or build process? Is it a single page app?

Please share your public repo or a minimal reproducible example. That will let us all work together from the same code to figure out what’s going wrong.

Hello! My project is not an SPA. It has multiple pages. The project basically a handful of HTML pages, CSS and some JS & Jquery in a few sections.

This is my codebase - https://github.com/ShayokhShorfuddin/restaurant

This codebase works perfectly when run locally using Vite. But it's not behaving properly on Vercel. Please keep in mind I tried to deploy this project 2 times. At first, I chose "Vite"; at the 2nd attempt, I chose "Other" as my preset. The issue persists in both cases.

It would be helpful if you could share any error codes with us

Hi @shayokhshorfuddin, thanks for sharing the project with us.

It looks like you've all the static assets available in the project without any build steps. Can you try updating the output directory to .?

Just tried that.

Here is the deployment link - https://restaurant-gilt-one.vercel.app/

restaurant-gilt-one.vercel.app

Gwennie's Old Alaska Restaurant

Css went missing from the index page. And as mentioned before, other valid routes cannot be found by Vercel.

Here is my deployment log -

Hi @shayokhshorfuddin, thanks for trying the solution.

I've cloned and deployed your project (live here) successfully after doing the following changes:

restaurant-phi-beige.vercel.app

Active Restaurant

1. You must pay attention to the build warnings, here it says that to include the jquery scripts you must declare them as type="module" in the script tags. So, I did it like this (you must do it for all warnings):
2. To use Vite for multi-page apps, according to the Vite docs you must update the vite.config.js file, as follow:

1
import { dirname, resolve } from "node:path";
2
import { fileURLToPath } from "node:url";
3
import { defineConfig } from "vite";
4

5
const __dirname = dirname(fileURLToPath(import.meta.url));
6

7
export default defineConfig({
8
  build: {
9
    rollupOptions: {
10
      input: {
11
        main: resolve(__dirname, "index.html"),
12
        "page-2": resolve(__dirname, "page-2.html"),
13
        "page-3": resolve(__dirname, "page-3.html"),
14
        "page-4": resolve(__dirname, "page-4.html"),
15
        "page-5": resolve(__dirname, "page-5.html"),
16
        "page-6": resolve(__dirname, "page-6.html"),
17
        "page-9": resolve(__dirname, "page-9.html"),
18
        "page-10": resolve(__dirname, "page-10.html"),
19
        "profile-page": resolve(__dirname, "profile-page.html"),
20
        "order-details": resolve(__dirname, "order-details.html"),
21
      },
22
    },
23
  },
24
});

3. Use the default Vite preset in the Vercel project settings.

After doing these changes your project works fine on Vercel. Try it here: https://restaurant-phi-beige.vercel.app/

Thank you so much for the effort! I checked the site and the routes seems to be working! 🎉

But one thing I noticed is that the functionalities that use JQuery are still unresponsive—for instance, the "Load More" button at the end of the index page. In my local environment, this button loads 4 more cards every time it's pressed.

Vite seems to put the script tags placed at the bottom of body directly in the head tag. This could be a reason but can't say with full confidence.

Any suggestion or insight on that would be very helpful!