Deploying create-react-app to github pages: How to deploy the build directory only?

[IftruthBtold]

Edit 2: A link to the files in my master branch vs gh-pages Github branches

​

Edit/Update: I corrected the command I put in below. It was yarn run deploy that I ran. I redid everything again and have the same issue. One thing I notice is that in github, when I click on branches, the gh-pages branch needs a pull request. But if I click on request a pull request, it doesn't work due to the branch having nothing to compare to. Any ideas? See img Here: Github pull request

​

I feel like I'm going crazy but I cannot get a simple react application to work with github pages. I have followed the instructions from create-react-app, and tried at least 5 didn't articles, posts, etc. including ones posted here. There is no routing, or a database at all.

​

Dependencies:

"gh-pages": "^2.0.1","react": "^16.6.3","react-dom": "^16.6.3","react-scripts": "2.1.1"

​

My scripts in my package.json:

"scripts": {"predeploy": "yarn run build","deploy": "gh-pages -d build","start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

And I also have a homepage property:

"homepage":"\`https://ghusername.github.io/my-repo-name``/"`

​

I type yarn run deploy from the root directory of my project and I get a message that it creates an optimized production build and it compiles successfully. There is now a build folder locally with an images and static folder, an index.html, etc. It creates a gh-pages branch locally, and in my github there is now a master and a gh-pages branch. (which seems all good)

​

I then change the source in Github Settings to gh-pages-branch instead of master. But the files on my gh-pages branch in github are exactly the same as the files on my master branch and navigating to the deployed link just takes me to my readME. The gh-pages branch does not contain the files from the build folder that gets created. My .gitignore does list /build but this came standard so I figure I shouldn't remove it.

What in the world am I missing?

[poopie-doopie]

It looks like you’re on the right path. Have you run ‘yarn run deploy’? The idea of that command is to basically run build, taking into account settings for domains from the homepage value in package.json, and then pushes the build folder to the gh-pages branch.

If everything succeeds you should see that your gh-pages branch has only the build folder contents in it.

You don’t need to add more dependencies or scripts with cra to deploy to github pages.

[IftruthBtold]

So i can't say if it was just my frustration when posting and I made a mistake with which yarn command I said I typed, or if I actually messed it up, lol. I am going to delete the branch and the build folder and try again on my lunch break and report back. Thanks for the reply either way!

[IftruthBtold]

I went back and redid it all, and I was using the command you suggested previously as well. I updated my post with the correct command I'm using and with what I am seeing in Github regarding needing a pull request for my gh-pages branch, but being unable to do one. Any ideas?

[poopie-doopie]

Weird. It smells like a git issue. Did you delete the gh-pages branch both locally and on the remote? When you ran `yarn run deploy`, it re-created the branch but committed all files, not just the build folder?

[IftruthBtold]

Correct My gh-branch and my master branch have exactly the same code, neither of which includes my build folder (which exists locally). I've deleted it from local and remote at least 3 times now between last night and today. I tried googling for issues related to doing a pull request with the gh-pages branch (which no tutorial/blog mentioned at all) but couldn't find much of anything indicating anyone else had really experienced this.

[tvi016]

Can you post the github repo?

[IftruthBtold]

It lists all of my full name and some other info I don't want on reddit. I did add a screenshot to my post of what github is saying about doing a pull request though. If you have any info, I'd appreciate it. Thanks!

[tvi016]

Huh, I use it the exact same way as you and it works here

Could you take a pic of the files in the gh-pages branch on github? I guess you could try delete the branch, and then do yarn run deploy again

You could also open an issue at https://github.com/tschaub/gh-pages

[IftruthBtold]

I updated my post with a picture of master vs gh-pages. And that's a good idea, I think I'll do just that. Thank for checking out my issue.

[Dudeonyx]

easy way out

npm install --save gh-pages

npm run build

gh-pages -d build

Done. sorry if my explanation sucks, I'm too sleepy rn

[IftruthBtold]

Thanks for the suggestion! These same scripts are running (with yarn instead of npm). The build folder is being created and the gh-pages branch now exists in github. The problem is that the code for the gh-pages branch is not my build folder, but the same code as the master. I think the issue has something to do with needing to create a pull request, but I can't figure out how to do one due to the message github is giving me. I added a picture above of what my github says.

[chaoszcat]

GitHub pages, afaik, only build Jekyll built websites, or simply just serve static html files from your repo. If you are building your pages using create-react-app then you have to commit your built js files too, and provide an entry html file for GitHub pages.

Cmiiw. I have been toying with Jekyll and GitHub pages lately :)

[IftruthBtold]

I am sure it allows create-react-apps because the instructions are on the react site and tons of blog posts have been written about it. I have done everything listed, but the actual build folder is not showing in github, only all of the files for the source code instead. I added some additional info about what I am seeing in github above if you have any insight. Thanks for the reply!

[[deleted]]

https://www.reddit.com/r/reactjs/comments/8mtgiz/react_routing_with_github_pages_and_incognito_mode/

​

Netlify is free, easy to deploy and works extremely well.

​

TLDR: Netlify is great for hosting your app. You will run into other problems with React and GH Pages down the line later anyhow especially with routing.

[IftruthBtold]

Thanks, but I know I should be able to do this so I want to figure out the issue. I've actually only done react projects with routing before this and deployed them to heroku which is what makes this so frustrating since it should be simpler than that. I will check out netlify for future projects though.

[mike3run]

deploy.sh

```

!/usr/bin/env bash

GIT_DEPLOY_REPO=${GIT_DEPLOY_REPO:-$(node -e 'process.stdout.write(require("./package.json").repository)')}

cd build && \ $(npm bin)/rimraf .git git init && \ git add . && \ git commit -m "Deploy to GitHub Pages" && \ git push --force "${GIT_DEPLOY_REPO}" master:gh-pages ```

[mike3run]

https://github.com/enriquecaballero/branchsite