Deploying React app with react-router to gh-pages

Question

I'm having a bit of a hard time deploying my web application to gh-pages and I'm not sure where I'm going wrong.

You can view the link here .

Locally everything works, but I'm guessing because gh-pages puts the application in a sub-folder my index.html file routing is causing issues. I've tried a number of ways but I can't seem to get it working.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/style/materialize.css">
    <link rel="stylesheet" href="/style/style.css">
    <script src="/scripts/jquery.js"></script>
    <script src="/scripts/materialize.min.js"></script>

  </head>
  <body>
    <div class="wrapper"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

And then my routes look like this:

export default (
    <Route path="/" component={App}>
        <IndexRoute component={Search} />
        <Route path="r/:sub" component={Viewer} />
        <Route path="r/:sub/:filter" component={Viewer} />
        <Route path="r/:sub/:filter/:search" component={Viewer} />
        <Route path="/search" component={Search} />
    </Route>
)

The full code can be found here .

Where am I going wrong with this? I feel like the base path changes whenever one of my routes is visited directly and it prevents my SPA from working properly because of file path relativity.

Answer 1

In your index.html file, if you don't own the whole domain in this case gh-pages why you are using absolute URLs?

Replace them to use relative

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="author" content="James Ives">
    <meta name="description" content="Reddit Viewer SPA">
    <meta name="keywords" content="react, redux, reddit, api, spa">
    <title>React Reddit Viewer</title>

    <link rel="icon" type="image/png" href="./assets/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="./assets/favicon-16x16.png" sizes="16x16" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="./style/materialize.css">
    <link rel="stylesheet" href="./style/style.css">
    <script src="./scripts/jquery.js"></script>
    <script src="./scripts/materialize.min.js"></script>

  </head>
  <body>
    <div class="wrapper"></div>
  </body>
  <script src="./bundle.js"></script>
</html>

And you will always have problems if you use browserHistory

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, hashHistory } from 'react-router';
import thunk from 'redux-thunk';
import promise from 'redux-promise';

import routes from './routes';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(
  thunk
)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={hashHistory} routes={routes} />
  </Provider>
  , document.querySelector('.wrapper'));

If using browserHistory is a must, then you will have to deal with 404, 403 redirections in your server provider

Which can become tedious if you don't have control over the domain

Deploying React app with react-router to gh-pages

Question

1 answers

solution1
0 ACCPTED 2017-09-18 00:46:02

Deploying React app with react-router to gh-pages

Question

1 answers

solution1 0 ACCPTED 2017-09-18 00:46:02

solution1
0 ACCPTED 2017-09-18 00:46:02