Tutorial: The purpose of this app is to publish a React application to GitHub Pages and taking advantage of the free GitHub Actions Workflows. Follow these steps to successfully publish your React App to the GitHub Cloud.

1. Create a new github repo [react-app-with-workflow]

2. Open your terminal and send command:
$ git clone https://github.com/edwinaquino/react-app-with-workflow.git

3. enter the react-app-with-workflow folder:
$ cd react-app-with-workflow

4. Create a new react app in this folder
$ npx create-react-app .

5. Install dependency called gh-page (GitHub Pages) as development
$ npm install gh-pages --save-dev

6. Open the project with your IDE. Here I will be using VS Code
$ code .

7. Open package.json file and confirm gh-pages has been installed in the devDependicies

  "devDependencies": {
    "gh-pages": "^3.2.3"


8. in package.json Add a homepage property after the "name" property

"homepage" : "https://edwinaquino.github.io/react-app-with-workflow",


9. Under scripts add predeploy and deploy commands

  "scripts": {
    "predeploy" : "npm run build",
    "deploy" : "gh-pages -d build",


10. Open your terminal in VS Code and run this command to deploy the app using the script command we just added in package.json
$ npm run deploy

You should see a "Plublished" Message when successfully completed:

> react-app-with-workflow@0.1.0 deploy
> gh-pages -d build

Published

11. Go back to your browser and open the repo in github. You will see the new gh-pages branch with your static assets

https://github.com/edwinaquino/react-app-with-workflow

12. While in the github repository, go to settings > Pages

You will see that you have a the react-app-with-workflow as a published site. Click on the url to open the application into a browser:

https://edwinaquino.github.io/react-app-with-workflow

Stope here. The rest below is optional

Now, we are going to automate the deployment of the react application into github by setting up a github actions workflow

13. Create the .github and workflow floder and a file called workflow.yml in the root of your app or you can use this command in the VS Code terminal:
$ mkdir -p .github/workflows
$ touch .github/workflows/workflow.yml
$ code .github/workflows/workflow.yml

14. Make the workflow.yml look like the following to deploy this workflow using a container with linux and node.js
NOTE: For the latest version visit: https://github.com/JamesIves/github-pages-deploy-action

name: Github Pages Deploy
on:
    push:
        branches:
            - "master"
jobs:
    build:
        runs-on: ubuntu-latest

        strategy:
            matrix:
                node-version: [15.x]
        steps:
            - name: Checkout
              uses: actions/checkout@v1

            - name: Install and build
              run: npm install && npm run build

            - name: Deploy
              uses: JamesIves/[email protected] # For the latest version: https://github.com/JamesIves/github-pages-deploy-action
              with:
                branch: gh-pages # the branch the action should deploy to.
                folder: build # the folder the actions should deploy


* Make sure you have good syntax for your .yml file or else your workflow will fail. Here is a good place to validate your .yml file: http://www.yamllint.com/

15. Save the changes in workflow.yml and open your terminal for the following github command to save your github changes, commit and push the changes:
$ git add .
$ git commit -m "Initial Commit"
$ git push

 
ERROR:

To https://github.com/edwinaquino/react-app-with-workflow.git
 ! [remote rejected] main -> main (refusing to allow a Personal Access Token to create or update workflow `.github/workflows/workflow.yml` without `workflow` scope)
error: failed to push some refs to 'https://github.com/edwinaquino/react-app-with-workflow.git'
 
[SOLUTION]
 

16. Open github app in your browser and go to the actions tab. In the actions tab you will see the workflow "Initial Commit" running. Click on it view the status

17. Once the deployement has completed successfully, open the application in your browser.
https://edwinaquino.github.io/react-app-with-workflow

18. At this point, the application is published and working on github. Lets test it out to  make sure we can make changes. Open the src/App.js file and change the following:

FIND:

Edit <code>src/App.js</code> and save to reload.

CHANGE TO:

 I made a change

19. add, commit and push the new changes to github

$ npm run deploy
$ git add .
$ git commit -m "changed App.js"
$ git push

Now open the broswer and you should see the new changes.

https://edwinaquino.github.io/react-app-with-workflow



Use this form to change the application name to whatever you provide in the text field. The text you provide will replace all the 'ionic-react-202110091633pm' instances on this page with whatever you enter in the field above.