How to deploy a React App to github Pages with github Actions:

 How to deploy a React App to github Pages with github Actions:

===============================================================

 create a repo in github.

 

 Clone the peoject and then create react application

 

npx create-react-app react-github-pages-actions

npm install

npm i gh-pages --save-dev

add the package.json

 { 

 "name": "react-github-pages-actions",

 THEN "homepage": "https://[GITHUB_USERNAME}.github.io/react-github-pages-actions   {project name}

 ...

 ...

 }

 ,

 "scripts": {

"predeploy": "npm run build",

"deploy" : "gh-pages -d build",    // gh-pages is ceate a new branch to deploy from                                                                                 the branch  merge the feature branch into main branch 

 // from main to gh-page will carete clone

"start": "react-script start",  

....

....

...

}

Once the development is completed, run predeploy cmd

THEN run the deploymnet command

goto github -> settings -> pages -> you can see the url is deploy in github pages.

We can change the branch name and post the root/ docs save

Addding Github actions to react project:

---------------------------------------

create .github folder in the project root directory inside create another directory -> workflow (folder ) -> then create file workflow.yml