DEV Community

Zain Ahmed
Zain Ahmed

Posted on • Updated on


Deploy React app on github pages with GitHub action auto deploy

Steps to follow

  1. First create a project with command npx create-react-app appname

  2. 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

  3. now open package.json file and add homepage key after private key and assign value to homepage key

now add these two line in scripts object

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

Alt Text

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

Alt Text

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

Alt Text

Alt Text

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

Top comments (1)

dauntless profile image
Linda Okorie

What's the ACCESS_TOKEN supposed to be?

An Animated Guide to Node.js Event Loop

>> Check out this classic DEV post <<