CODEWITHSUNDEEP
webpackcreate-react-app
interpolated
interpolated

Reputation: 47

create react app build fails on github pages

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?

Upvotes: 0

Views: 482

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32972

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.

Upvotes: 2

Related Questions