How to fix HTTP 404 on my Github Pages? How I can run my application with more folders in my repository?

Question

I am trying to see my React + Vite's project using github actions but I'm receiving this error: 404 Error Image

This is my repository:

Folders in my repository

My React's project is on web folder and I put in package.json the "homepage": "github-page/",:

{
  "name": "web",
  "private": true,
  "version": "0.0.0",
  "homepage": "github-page/",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
...
}

And, I set in workflow:

Workflow's content

May someone help me? Sorry for my English rs

I tried to put cd web to make my web application work.

name: deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Build web-app
        run: |
          cd web
          npm ci
          npm run build
      - name: Deploy to gh-pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

Answer 1

How I fix the problem:

.github/workflows: OK

---

Enter in the folder named web, I edit the vite.config.ts's content

before:

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

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

after:

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

export default defineConfig({
  plugins: [react()],
  base: '/munchkin/',
  build: {
    outDir: 'docs'
  }
});

I needed too add and edit some contents in pacakge.json:

{
  "name": "web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "homepage": "https://Vicjun22.github.io/munchkin",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d docs"
  },
...

After all of this I run npm run build to generate a new folder named "docs" and npm run deploy. After some minutes my gh-pages was working!

Sorry for my English rs This is my link to access my repository: https://github.com/Vicjun22/munchkin