Pages broken when deployed

Help
,
1

Hello, I have created a React application using vite. My page navigation worked during development but after deployment it breaks. Just curious if there are any obvious “gotchas” I am missing.

Current: When the “portfolio” button is clicked, the page displays “404 not found”.

Expected: When deployed on my local machine the page navigation works as expected. And the portfolio page is displayed.

Locally hosted: Building locally with “npm run dev” and then clicking the link given. Gives the working application.

Seeing the deployed version: build with “vercel” command. You’ll be given a link in the CLI. Gives the deployed application that breaks when “portfolio” is clicked.

Repo: GitHub - Orewagenki/resume-website

Deployment site on vercel: https://resume-website-six-flax.vercel.app/

2

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.

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

3

Hi @orewagenki, welcome to the Vercel Community!

Glad to see you solved the issue. To help other community members, could you post the link to the community solution that helped you here?

4

Of course! I will do that now, thank you!

5

FIX:

create a vercel.json file in the main directory and paste the code:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}