CODEWITHSUNDEEP
reactjsgithub-pages
Rob
Rob

Reputation: 47

How do I deploy my react app to GitHub Pages in production mode?

So, I created a basic React App following a tutorial so I could use it as my new GitHub homepage. When I run npm locally it shows me my React App as pictured below. However when I go to my GitHub Pages address (https://robagruen.github.io/), I get the second image pictured. I've looked around online, and I'm having trouble figuring out what's going on with this. I have run both npm run build and npm run deploy and the script runs leaving the output message of "Published." however this does not seem to be the case to me. I've also added "predeploy": "npm run build" and "deploy": "gh-pages -d build" to my package.json file. Has anyone else run into this before with GitHub pages? I'd really appreciate any helpful advice! Thank you.

Local version of my react app Github Pages version of the react app

Upvotes: 1

Views: 738

Answers (5)

Abhijith Konnayil
Abhijith Konnayil

Reputation: 4616

After following this tutorial, https://medium.com/the-andela-way/how-to-deploy-your-react-application-to-github-pages-in-less-than-5-minutes-8c5f665a2d2a ,make the changes in packages.json

Then, create a branch named gh-pages and push it to the github with the same branch name gh-pages. Then change the source to gh-pages branch in Github Pages section in settings

Upvotes: 1

simonhoyos
simonhoyos

Reputation: 1

change deploy script from "gh-pages -d build" for "gh-pages -b master -d build".

This is only needed for personal websites [username].github.io.

Upvotes: 0

inPhoenix
inPhoenix

Reputation: 11

As you are trying to deploy in the GitHub user page:

https://yourUserName.github.io/

As opposed to a Project Page:

https://yourUserName.github.io/yourRepo

You need slightly different steps:

Create a new copy of your Master branch, (you can name it as you like):

$ git checkout -b source
$ git push origin source

This way the source branch is a direct copy of our master. Next steps:

  1. Navigate to your repo on Github, and select "Settings".
  2. On the left-side panel, click on "Branches".

Figure: Changing the default Branch

Then you will be able to select the 'Source' branch and update it. Now in the terminal (source branch) run:

  1. yarn deploy

Wait a couple of minutes, refresh and you be able to see your site at:

  https://yourGitUser.github.io/

Making changes:

Your source branch is acting like your master. So for next changes, merge your changes into source.

You might find more information about this on the following article: https://dev.to/javascripterika/deploy-a-react-app-as-a-github-user-page-with-yarn-3fka

Note, if your next project you deploy a project page, you might follow the steps described here: https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom

Upvotes: 1

herodrigues
herodrigues

Reputation: 967

You're using the master branch for the Github pages feature and that's why is showing the README file as the main page.

Set the default branch to gh-pages in the repository settings or change the deployed React source to master.

Upvotes: 0

Jacob Bralish
Jacob Bralish

Reputation: 271

Not entirely sure this is the issue because I have never deployed to github pages but it looks like the url for the page should be formatted as so:

http://{username}.github.io/{repo-name}

According to this resource https://github.com/gitname/react-gh-pages/blob/master/README.md

Upvotes: 0

Related Questions