I'm having trouble with my Twitter clone

(edited)

I'm having trouble with my Twitter clone, specifically receiving a 404 error despite multiple attempts to push and clear the error. I've confirmed that the URL is correct, the deployment exists, the logs show no errors, and I have the necessary permissions. I'm using React.js, and after running the build command, the frontend/dist directory is created. My vercel.json configuration and project structure are set up correctly, but I'm still facing issues.

https://twitter-clone-one-hazel.vercel.app/

twitter-clone-one-hazel.vercel.app

Vite + React

my vercel.json:

{
  "version": 2,
  "builds": [
    {
      "src": "backend/server.js",
      "use": "@vercel/node"
    },
    {
      "src": "frontend/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "backend/server.js"
    },
    {
      "src": "/(.*)",
      "dest": "frontend/dist/$1"
    }
  ]
}

project structure:

/project-root
- /backend
  - server.js (Entry point for the backend)
  - /routes
    - authRoute.js
    - userRoute.js
    - postRoute.js
    - notificationRoute.js
  - /db
    - config.js
- /frontend
  - /dist (React build files after running npm run build)
vercel.json
package.json

please ask me if you need to pictures to understand clearly.

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.

saw the another community post with 404 debugging tips

that wasnt able to help me :(

Vercel Staff

It looks like you're deploying both the frontend and backend directories in the same project. That might be causing the files to have a different path than you expected. Please check the deployment output to make sure the URL is what you expect. Steps to do that are described in the debugging guide from the previous comment.

You used the #react tag on the post, but what's used for the backend portion of the app? I know Express is a common one, and it sometimes causes problems since it was designed for traditional servers rather than serverless.

There's article an posted about how to use Express.js with Vercel. I recommend following that guide is your project uses Express. If it's using a different framework, I'm happy to share more relevant resources. Just let me know!

Hello ,

As I am new to this field, I can't understand some things.

So please guide me till the end.

So now do I need to put my server.js inside the api folder or can I put that in the backend folder?

Vercel Staff

I recommend taking your time to carefully read through the documentation. That will help you understand what to do. The Express.js deployment guide and Node.js runtime page are good resources to get you started.

Please let me know if you run into a specific question or problem. I don't have time in my schedule for pair programming at present, but I'm happy to guide you to the right information to let you solve it on your own.

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

{ "version": 2, "builds": [ { "src": "backend/server.js", "use": "@vercel/node" }, { "src": "frontend/package.json", "use": "@vercel/static-build", "config": { "distDir": "dist" } } ], "routes": [ { "src": "/api/(.*)", "dest": "backend/server.js" }, { "src": "/(.*)", "dest": "frontend/dist/$1" } ] }