Deploy React app on github pages with GitHub action auto deploy

1. first i create a project with npx create-react-app appname

2. then i just create a repo on github and then connect the repo with project push our first commit on this repo and then install library (gh-pages) npm

now here is come main part , open package.json file and add homepage key after private key and assign value to this 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”,

package.json

now run the command on project terminal npm run deploy and this command will create build folder in your project and if you want to see your hosted project then go to repo setting which you integrate with this 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 multi 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

secrets

define secrets

how 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 you 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

Coding Gem

Thank you.