Question about deploying React pages

Hey guys,

This may be a dumb question but I can’t find the answer. Basically, after deploying a React app to gh-pages, I want to push commit changes to the gh-pages branch. I get this message:

! [rejected] gh-pages -> gh-pages (non-fast-forward)
error: failed to push some refs to '’
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: ‘git pull …’) before pushing again.
hint: See the ‘Note about fast-forwards’ in ‘git push --help’ for details.

I try to use ‘git pull’ but end up with this message:

There is no tracking information for the current branch.
Please specify which branch you want to merge with.
See git-pull(1) for details.

git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

git branch --set-upstream-to=origin/<branch> gh-pages

This doesn’t happen when I push changes on non-React projects. My question is how do you properly commit changes to gh-pages for React apps so that the branch is up to date with the master branch?

You haven’t updated your package.json with the necessary scripts:

Add the following scripts in your package.json:

 "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

The predeploy script will run automatically before deploy is run.

The message you’re getting is because you’re trying to push directly to the gh-pages branch, and that branch is ahead of what you have locally (it’s had something deployed to it remotely, but not locally). Because it is ahead, it’s expecting you to pull down the updated code before you push again, but that’s not how the deploy to gh-pages works, it should all happen automatically. The predeploy script will build the package of deployable code before it goes to gh-pages, which is what you want.

1 Like

Thanks for replying @DanCouper! That helps a lot. I still don’t understand how exactly to make the gh-pages site reflect any changes I may want to make later on after it’s been deployed. Is there a specific command I have to type on the command line or will it automatically update when I push changes to the master branch? Sorry if I’m not understanding you correctly. I’m new to using React.

Basically, you don’t want to touch the actual gh-pages branch. What you do is work on your app: when you want to update the pages, you run npm run deploy - that should take care of buildong your code into a deployable package and pushing it off to gh-pages. Locally, you work in the main branch, you commit any changes, then you deploy when you’re happy with what you have locally.

1 Like

@DanCouper Okay that makes so much sense now. I appreciate you breaking it down for me. Cheers!