• Make an empty repo on github (no file)
  • Install your react app using this command
npx create-react-app yourprojectname
  • Go to your project
cd yourprojectname
  • Intall gh-pages
npm install gh-pages
  • Add a homepage to package.json
"homepage":"https://yourgithubusername.github.io/yourprojectname"

// example:
"homepage":"https://tradecoder.github.io/react-gh-pages"
  • Add the following code to the script section of package.json
"predeploy":"npm run build",
"deploy":"gh-pages -d build"

If you do not delete any code from the package.json file from the script,
your code may look like this after adding the above properties

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy":"npm run build",
    "deploy":"gh-pages -d build"
  }
  • Create a git repo
git init
  • Add your github project remote url
git remote add origin https://github.com/yourgithubusername/yourprojectname.git

// We are adding our own

git remote add origin https://github.com/tradecoder/react-gh-pages
  • Setup is ok, now deploy your app to github gh-pages
npm run deploy

Visit your project using the homepage you set earlier

  • Upload the source code to github
    Add all the changes in your project
git add --all
  • Commit with a message
git commit -m 'your message here'
  • Push your source codes to your github project
git push origin master

Source code uploaded to your github master branch

  • Done

Go back to Tradecoder Developers Hub

Read more of React app


If you find this post helpful, please feel free to share it