1

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
Victor Elias Ross Júnior
  • 11
  • 3
  • Include the text-version (not image) of your `package.json` in your post. In general, avoid posting images on stack overflow because the image links may stop working one day. I'm guessing the problem is caused by `homepage` value that you set in your `package.json`. Try getting rid completely of the line `homepage": "github-page/`. If your repository is public, share the link so that others can reproduce your error. – Bunny Apr 06 '23 at 17:13
  • Thank you for your sugestion, I removed the homepage": "github-page/ but only my main README.md appears now. This is my repo in the github: https://github.com/Vicjun22/munchkin – Victor Elias Ross Júnior Apr 07 '23 at 01:00

1 Answers1

0

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

Victor Elias Ross Júnior
  • 11
  • 3