Github Pages and React App not working regardless of methods

Viewed 2275

I've been trying to add my React App project to Github Pages for a week. After all the prep work and everything that need to be done, I finally got it to show up, well kinda. It actually doesn't show anything, nor does it give me errors. Which leads me to believe that my script

<script src="../dist/bundle.js"></script>

is the culprit. However, the problem is I've never once used bundle.js. I wanted to learn how to use React without using create-react-app, and in doing so I seem to have gotten to far along in the game I'm not even sure how this is supposed to work.

Here is the Github Pages in it's current form

https://kevin6767.github.io/redux-api-opendota2/

EDIT: It now seems to be showing a 404. I'm not even sure why this is not working at this point. I've tried to many different methods.

1 Answers

I am not sure how you uploaded your React application to GitHub Pages, but, here, I will be mentioning the correct way to do it:

Step 01: Install gh-pages via the terminal, making sure you are in the correct file directory.

$ npm install gh-pages --save -dev (We are saving it as a dev dependency)

Step 02: Go to your package.json and add

"homepage": "{your_GitHub_username}.github.io/{repo_name}," above the "name"

Step 03: In the "scripts" section of package.json, add

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

Step 04: Assuming that you have already committed and pushed your code to your Git Repo, now, in the terminal, use the command npm run deploy to see the changes in your GitHub Pages.

Also, make sure that in your source code, you have set the same route for the homepage as in the package.json.

Related