React Vite 404 error upon deploying on GitHub

Question

I deployed a vite react project on git using GitHub pages when i open the project in browser it shows 404 error in main.jsx file. I don't know how it is happened i need a solution for this

Project link

https://sreejith-10.github.io/Food-Recipe-App/

I tried to deploy the project in other platforms but same result

Answer 1

I got the same error, but I was able to resolve it in my repository my-repo

the steps are as follows,

1. Previously the base in my config was base: '/REPO/' according to the documentation but got the error, then I changed vite.config.js to:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [react()],
})

However, you can follow the documentation to change the base to '/REPO/' or follow the base above

2. then, deploy according to the documentation instructions with github actions vite.doc
3. Or you can use the gh-pages package

• npm install gh-pages --save-dev
• add script package.json and npm run deploy

"deploy": "gh-pages -d dist",

• change the branch to (gh-pages) which will be deployed