1

I have a React app I've created with create-react-app, which is deployed to Github Pages via the npm run deploy command using the following:

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

More specifically, I have used the Github Pages steps from here: https://www.freecodecamp.org/news/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089

I'm getting feedback on different versions of the application from some non-dev friends of mine, so I'd like to be able to make changes, push them to a branch, then deploy that branch to the homepage. Then if the changes are unpopular, I could deploy the master branch again, without me having to clutter up the master branch with merges and reverts. Is this possible, and if so, how would I do this? I've attempted "deploy": "gh-pages -b <branch-name> -d build" in the scripts, but to no avail, and Google doesn't seem to answer this particular problem. (It may be that I'm unable to find it amidst the sea of "How to deploy a React app to Github Pages" tutorials, which I have solved)

Repository, in case further context is required: https://github.com/JayBaileyCS/cultivation-idle

Timothy Jones
  • 21,495
  • 6
  • 60
  • 90
JayBaileyCS
  • 13
  • 2

1 Answers1

2

Github Pages and gh-pages are different things.

The gh-pages npm package is a helper that makes it easy to create a (new) branch with your built source that is then used by github to host pages. This destination branch is called gh-pages by default.

Deploying a different source branch

If you are trying to deploy the source from a different branch, then you can simply do:

git checkout <branch-name>
npm run build
npm run deploy

This will use the source from your current branch to create or update the gh-pages branch.

Using a different branch as the destination

The -b <branch-name> part of the gh-pages command tells it which branch to put the compiled html into. If you like you can also tell github to serve a different destination branch-

From the documentation:

  • Go to your repository
  • Click settings
  • In the "Code and automation" section of the sidebar, click Pages.
  • Under "GitHub Pages", use the None or Branch drop-down menu and select a publishing source.

The publishing source allows you to select the branch.

You can also pick a folder within that branch:

  • Optionally, use the drop-down menu to select a folder for your publishing source.
Timothy Jones
  • 21,495
  • 6
  • 60
  • 90
  • GitHub Pages posts the project to a "gh-pages" branch and deploys from there, so changing the branch away from gh-pages hasn't worked for me. It's my understanding that one can use an index.html page on a regular branch to deploy a site instead, but being a React app, my app doesn't have HTML pages, and thus doesn't have an index.html file. (When I try to swap branches, it just shows the README file) What I'm looking for is how to change which branch is deployed to the gh-pages branch, or find a way to deploy without it which would allow the above solution to work. – JayBaileyCS Feb 24 '22 at 13:41
  • The answer is about how to configure github pages to use a different branch. From your comment, I suspect you need to configure the `gh-pages` app, which is different. See the instructions here - you can configure a different branch: https://www.npmjs.com/package/gh-pages – Timothy Jones Feb 24 '22 at 13:50
  • React apps do have html pages, after the build they end up in a folder usually called `dist` or `build` or similar. – Timothy Jones Feb 24 '22 at 13:52
  • If you are trying to deploy the source from a different branch, then you can do `git checkout ` and then `npm run deploy` – Timothy Jones Feb 24 '22 at 13:54
  • `gh-pages` is an npm package designed to create a branch and configure it for github pages - confusingly, it's not actually part of github pages. – Timothy Jones Feb 24 '22 at 13:57
  • I've updated the answer, hopefully it's now clearer – Timothy Jones Feb 24 '22 at 14:05
  • 1
    Thanks so much - this explains it perfectly and I was able to make it work. Answer accepted. – JayBaileyCS Feb 24 '22 at 14:40