0

I have used create-react-app to create a react app. (Woohoo!)

The app runs well when I am developing it.

When I run 'npm build' and then host the build folder locally using python SimpleHTTPServer and the app works well. It also works on another machine hosted locally.

I used gh-pages to build and deploy the app to github at https://interpolated.github.io/ojclient/

The html loads, the js loads, and the css loads yet the page doesn't render. There are no console errors. It is almost as though the js doesn't run.

Are there any reasons the js wouldn't run when hosted on github?

Any help would be greatly appreciated, without error messages it is v. difficult to know where to go.

Could it have something to do with react-router, which I am using?

Improve this question

1 Answer 1

Reset to default
2

The JavaScript runs correctly and the page also renders correctly. But of course you didn't expect a blank page. To find out why it's rendering a blank page you can use the React devtools extension.

Going to the React tab in the devtools you can see what elements are rendered:

React devtools elements

As you can see the <Router> contains null, that means there exists no matching route. You might be wondering what route is actually requested, so you can call the getCurrentLocation function of the history prop. The selected element is made available as the variable $r in the console, and you can call it with $r.props.history.getCurrentLocation():

React devtools current location

Now you know that the route is actually /ojclient/ but you don't have that in your routes.

As you suspected, react-router is the issue. You can either change the root of the main Route to /ojclient/ or you can also use a custom history instead of browersHistory where you specify the basename to /ojclient/ (see Customize your history further).

Keep in mind that GitHub pages don't support the HTML5 pushstate API used by browserHistory. To solve that issue you can have a look at the Notes on client-side routing section of Create React App.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.