404: NOT_FOUND Code: NOT_FOUND

After successfully deploying the project on Vercel, all domains are returning a 404: NOT_FOUND error. The project consists of two parts: a React application and Sanity Studio. The vercel.json configuration specifies the build paths for both parts, but neither is accessible after deployment. There were no errors in the build logs, and everything was uploaded and built successfully.

Current vercel.json configuration:

{
  "builds": [
    {
      "src": "hitech_landingpage/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    },
    {
      "src": "hitech_landingpage/hitech/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "routes": [
    {
      "src": "/",
      "dest": "/hitech-landing/build/index.html"
    },
    {
      "src": "/(.*)",
      "dest": "/hitech-landing/build/index.html"
    },    
    {
      "src": "/studio(.*)",
      "dest": "/hitech/dist/$1"
    }
  ]
}

my github repository https://github.com/hitechgroupcentralasia123/hitech_landingpage.git

domain https://hi-techkz.com/

Vercel Alum

Hi, ! Welcome to the Vercel Community

It looks like your deployment is working now?

Cross-posting this community post in case it's helpful! 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...

Hello, Pawlean!

Unfortunately, the deployment issue is still not resolved. I changed the IP address to the Plesk hosting IP, but the Sanity admin panel still isn't connecting to the links, and the client is unable to access it through the browser. When attempting to open the provided links in Vercel, I’m still encountering a 404 error.

I would greatly appreciate any help or recommendations on how to properly configure access to the Sanity Studio via Vercel so that the client can use it without needing a local setup.

Thank you in advance!

404: NOT_FOUND (hitech-landing-git-main-hitech-kz.vercel.app)

I would like to kindly ask for your assistance in reviewing the configuration of my vercel.json file to ensure that the paths for my deployment are correctly set up. Below is the configuration I'm using:

my github repository GitHub - hitechgroupcentralasia123/hitech_landingpage my github

{
  "builds": [
    {
      "src": "hitech_landingpage/hitech/package.json",
      "use": "@vercel/static-build"
    },
    {
      "src": "hitech_landingpage/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
  "routes": [
    {
      "src": "/",
      "dest": "/hitech-landing/build/index.html"
    },
    {
      "src": "/(.*)",
      "dest": "/hitech-landing/build/index.html"
    },
    {
      "src": "/studio(.*)",
      "dest": "/hitech/dist/$1"
    }
  ]
}

Context:

The first build points to hitech_landingpage/hitech/package.json, and the second build points to hitech_landingpage/package.json, with a distDir set to "build".
For routing, I aim to have the root / and any other paths /(.*) redirected to "/hitech-landing/build/index.html".
I also have a special route "/studio(.*)" that should map to the content located in "/hitech/dist/$1".

Could you please confirm if the paths are correctly defined, especially in terms of the project structure and deployment targets? If there are any adjustments that need to be made for the setup to function correctly, I would greatly appreciate your advice.

Vercel Alum

Hi, !

Thank you for providing the detailed context and your GitHub repository link. I've reviewed your vercel.json configuration and your project structure. What I noticed is that:

Your GitHub repository doesn't have a hitech_landingpage folder at the root level, which your current configuration assumes.
The hitech folder is directly in the root of your repository, not inside a hitech_landingpage folder.
There's no hitech-landing folder in your project structure.

Could you try this vercel.json configuration?

{
  "builds": [
    {
      "src": "hitech/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    },
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
  "routes": [
    {
      "src": "/studio(.*)",
      "dest": "/hitech/dist$1"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

What this does is:

The first build now correctly points to hitech/package.json for your Sanity studio.
The second build points to the root package.json for your main React application.
Both builds have their respective distDir specified.
The /studio(.*) route is kept and points to the Sanity studio build output.
A single catch-all route is used for the main application, pointing to /index.html. This allows your React router to handle client-side routing.

This assumes:

Your Sanity studio (in the hitech folder) builds to a dist directory.
Your main React application builds to a build directory in the project root.
You're using client-side routing in your React application.

Let us know how you get on!

This topic is closed. It no longer accepts new replies.

{ "builds": [ { "src": "hitech_landingpage/package.json", "use": "@vercel/static-build", "config": { "distDir": "build" } }, { "src": "hitech_landingpage/hitech/package.json", "use": "@vercel/static-build", "config": { "distDir": "dist" } } ], "routes": [ { "src": "/", "dest": "/hitech-landing/build/index.html" }, { "src": "/(.*)", "dest": "/hitech-landing/build/index.html" }, { "src": "/studio(.*)", "dest": "/hitech/dist/$1" } ] }

{ "builds": [ { "src": "hitech_landingpage/hitech/package.json", "use": "@vercel/static-build" }, { "src": "hitech_landingpage/package.json", "use": "@vercel/static-build", "config": { "distDir": "build" } } ], "routes": [ { "src": "/", "dest": "/hitech-landing/build/index.html" }, { "src": "/(.*)", "dest": "/hitech-landing/build/index.html" }, { "src": "/studio(.*)", "dest": "/hitech/dist/$1" } ] }

{ "builds": [ { "src": "hitech/package.json", "use": "@vercel/static-build", "config": { "distDir": "dist" } }, { "src": "package.json", "use": "@vercel/static-build", "config": { "distDir": "build" } } ], "routes": [ { "src": "/studio(.*)", "dest": "/hitech/dist$1" }, { "src": "/(.*)", "dest": "/index.html" } ] }