'How can I change the CSS and script paths in my index.html after running NPM build with GitHub Actions?

I have created a simple static website with React. I'm using the library react-bootstrap that references certain script and css files with absolute paths inside the index.html when I run npm build.
This leads to issues when deploying the build on GitHub pages, because the root page is https://xyz.github.io/repo-name/ and not https://xyz.github.io/.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta name="description" content="xyz" />

        <link rel="icon" href=".//favicon-96x96.ico" />
        <link rel="apple-touch-icon" href=".//apple-touch-icon-180x180.png" />
        <link rel="manifest" href=".//manifest.json" />

        <title>xyz</title>

        <script defer="defer" src="/static/js/main.ce5d72e5.js"></script>
        <link href="/static/css/main.e7720ab7.css" rel="stylesheet" />

    </head>
...

I'm auto-deploying the webapp with GitHub Actions. When there is a push to the main branch, a workflow will trigger, the app gets built and then pushed to branch prod, which is then set up as GitHub Page.

So far I've tried to add another GitHub Action that searches and replaces certain strings in my files such as https://github.com/marketplace/actions/find-and-replace without success.

What would be the best way to fix this?

Edit: My YAML file

# .github/workflows/publish.yml
name: Deploy on GitHub

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    name: Build and Push
    steps:
      - name: git-checkout
        uses: actions/checkout@v2

      - name: Install all dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Find and Replace JS
        uses: jacobtomlinson/gha-find-replace@v2
        with:
          find: 'src="static/js'
          replace: 'src="./static/js'
          include: "./build/index.html"
          
      - name: Find and Replace CSS
        uses: jacobtomlinson/gha-find-replace@v2
        with:
          find: 'href="static/css'
          replace: 'href="./static/css'
          include: "./build/index.html"
    
      - name: Push
        uses: s0/git-publish-subdir-action@develop
        env:
          REPO: self
          BRANCH: prod # The branch name where you want to push the assets
          FOLDER: build # The directory where your assets are generated
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
          MESSAGE: "Build: ({sha}) {msg}" # The commit message
reactjsnpmgithub-actionsreact-bootstrap


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions