Set the homepage Field in package.json #9
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # This is a basic workflow to help you get started with Actions | |
| name: CI | |
| # Controls when the workflow will run | |
| on: | |
| # Triggers the workflow on push or pull request events but only for the "main" branch | |
| push: | |
| branches: [ "main" ] | |
| pull_request: | |
| branches: [ "main" ] | |
| # Allows you to run this workflow manually from the Actions tab | |
| workflow_dispatch: | |
| # A workflow run is made up of one or more jobs that can run sequentially or in parallel | |
| jobs: | |
| # This workflow contains a single job called "deploy" | |
| deploy: | |
| # The type of runner that the job will run on | |
| runs-on: ubuntu-latest | |
| permissions: | |
| pages: write | |
| id-token: write | |
| contents: write | |
| # Steps represent a sequence of tasks that will be executed as part of the job | |
| steps: | |
| # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it | |
| - name: Checkout code | |
| uses: actions/checkout@v4 | |
| - name: Set up Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: '18' | |
| - name: Install dependencies | |
| run: npm install | |
| # Step 4: Build the React app | |
| - name: Build the app | |
| run: npm run build | |
| # Add a cleanup step to avoid old deployment data | |
| - name: Clean up previous deployment | |
| run: | | |
| git fetch --prune --unshallow | |
| git worktree remove gh-pages --force || true | |
| - name: Upload build artifact | |
| uses: actions/upload-pages-artifact@v3 | |
| with: | |
| name: github-pages | |
| path: build # The folder containing your build output | |
| #When React builds the app, it generates relative paths based on the homepage field. Without this field, the paths default to /, causing errors when served from a subpath like /repository-name. | |
| #Set the homepage Field in package.json | |
| #React assumes it is being served from the root of the domain (/), but GitHub Pages serves the app from a subpath like /repository-name. | |
| # Step 5: Deploy to GitHub Pages | |
| - name: Deploy to GitHub Pages | |
| uses: actions/deploy-pages@v4 | |
| env: | |
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Automatically provided by GitHub | |