Home > Net >  How do I host my React app on Github pages without getting redirected?
How do I host my React app on Github pages without getting redirected?

Time:06-03

I have added a homepage, predeploy and deploy properties to my package.json file, linked my app to my github and ran npm run deploy. The terminal indicates success, then when I go to my Gitpages URL I get the following: https://joe-dp.github.io/mh-app/

Does anyone have any ideas why the link is redirecting me to a React information page?

CodePudding user response:

  1. Under Repo → Settings → Pages → Sources, and select the gh-pages branch
  2. Put your built application (e.g. dist) at the root of the gh-pages branch to be served up

You'll probably want to automate this, which can be done quite easily with GitHub Actions.

The following example, uses JamesIves/github-pages-deploy-action, to build an deploy your app every time a change is made on your main branch.

Just create a file in .github/workflows/deploy-gh-pages.yml in your main branch, then populate it with:

name: Build and Deploy to GH Pages
on: 
  push:
  workflow_dispatch:
permissions: 
  contents: write
jobs:
  build-and-deploy:
    concurrency: ci-${{ github.ref }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Install and Build
        run: |
          yarn
          yarn build
      - name: Deploy
        uses: JamesIves/[email protected]
        with:
          branch: gh-pages
          folder: dist

Commit your files, the action will run automatically, and a few minutes later your app will be live on GH Pages

  • Related