Github Actions - CI/CD for React.js

 1. Install gh-pages npm package

Command: npm install gh-pages --save-dev

2. In package.json, add the homepage url

"homepage": "https://skyairwater.github.io/react-google-sheet-cms"

3. In package.json, under "scripts" section, add below line

"deploy": "gh-pages -d build"

4. Go to your repository in github and select "Actions"

5. Search for the workflow "node.js" and click configure button

6. In the editor, change the node-version to your value, eg:21.x

7. Click on "Commit changes" and it will add the node.js.yml file under .github folder in your branch

8. Pull changes to your local

9. Go to gh-pages npm package website https://www.npmjs.com/package/gh-pages and scroll all the way down

copy the below code to node.js.yml and align it properly

- name: Deploy with gh-pages
  run: |
    git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
    npx gh-pages -d build -u "github-actions-bot <support+actions@github.com>"
   env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

10. Go to github repository settings => actions => general and under Workflow Permissions, select "Read and Write Permissions" radio button

11. Go to github repository settings => pages

Under Build and Deployment section, select the source as "Deploy from a branch"

Select the branch as "gh-pages" and /root and click save button