Deploy React app on github pages with GitHub action auto deploy

Steps to follow

First create a project with command npx create-react-app appname
Then just create a repo on GitHub and then connect the repo with project after that push our first commit on this repo and then install library called gh-pages using npm/yarn
now open package.json file and add homepage key after private key and assign value to homepage key http://githib_username.github.io/repo_name

now add these two line in scripts object

“predeploy: “yarn run build”, “deploy”: “gh-pages -d build”,

after that run the command on project terminal npm run deploy this command will create build folder in your project.
If you want to see your hosted project then go to repo setting which you integrate with the project then search for a GitHub Page and you will find a url click on it and you will see you hosted app

now for automate your deployment then whenever you push code to a specific branch it will automatically run the deployment command and you don’t need to run multiple commands for deploy

create a .github folder in project root inside this folder create workflows folder and create a file in it with any name with .yml extension

this file have your automate job code for deployment

name is representing you GitHub action name on what action the job will perform will be showing by on keyword when you push your code to master it will run a job and do a deployment

on last you can see name as Deploy and we have some authentication process having USERNAME USER_EMAIL ACCESS_TOKEN these all will define in you connected repo ,
go to setting=> of this repo
go to=> secrets on left side bar
and define this variables

Now after all that you just have to push latest code to your master branch and it will run the git hub action you can also check your status of deployment on with click on Action button on repository bar and see your action status after deploy successfully you can check out on your app on same link as earler from setting->GitHub pages

hope it will help you and you learn alot from this , also you can support me on my Youtube channel

https://www.youtube.com/channel/UCkaoWtBz6ioLbNwRzIco5Yg?view_as=subscriber