I spent 4+ hours last night trying to deploy a React + Vite app to GitHub Pages, and finally figured out how to do so successfully. Here are the steps I followed:

1️⃣ Add base: '', to your vite.config.js file.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import tsconfigPaths from 'vite-tsconfig-paths';

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

2️⃣ From the root of the project, run this command to add gh-pages as a dependency:

npm install gh-pages --save-dev

3️⃣ Add these two lines to package.json file under the "scripts" property "deploy": "gh-pages -d dist",

// package.json
{
 "name": "name-of-your-project",
 "private": true,
 "version": "0.0.0",
 "type": "module",
 "scripts": {
 "dev": "vite --open",
 "build": "tsc -b && vite build",
 "deploy": "gh-pages -d dist",
 "lint": "eslint .",
 "preview": "vite preview"
 },
 // ... rest of package.json attributes ...
}

4️⃣ From the root of the project, run the following commands:

npm run build && npm run deploy

5️⃣ Check your repository’s pages settings, the gh-pages branch should be selected.

⚠️ Gotcha ⚠️: Ensure that you do not add a "/" at the beginning of image source URIs. For example, if you want to use the image culture.jpg in your app, ensure the source and URI are src="culture.jpg", not src="/culture.jpg". Otherwise, Vite will not be able to find the image.