S3 bucket can't load React application with routing

Question

So I am currently in this situation where I want to display my react application in the S3 bucket. When I deploy my application to the S3 bucket It gives me a static URL which I can see the application such as;

https://s3bucket.www.react-application.cloud/apps/calculationapp/24995X095636Fb9b5821/index.html

In my case I am seeing an empty page and my assumption is that there is some issues with the way I've configured my react routing inside of my index.js file;

index.js

 const getBasename = path => path.substr(0, path.lastIndexOf('/'));
 ReactDOM.render(
        <BrowserRouter basename={getBasename(window.location.pathname)}>
            <App />
        </BrowserRouter>,
        boostrapElement
    );

The reason to why Im saying this is most likely the issue is that when I simply deploy it with;

ReactDOM.render(
    <h1> Show me something ! </h1>
    boostrapElement
);

it works perfectly and Im able to see the h1

App.js

class App extends Component {
    render() {
        return (
            <React.Fragment>
                <Route key="start-path" path='/' render={(props) => <HomeComponent {...props} filterData='HOME' />} />
                <Route exact key="second-page" path='/react/second' render={(props) => <HomeComponent {...props} filterData='SECOND' />} />
                <Route exact key="third-page" path='/react/third' render={(props) => <HomeComponent {...props} filterData='THIRD' />} />
            </React.Fragment>
        )
    }
}

Add index.html both index and error @Static website hosting=> Use this bucket to host a website => Index document (index.html) => Error document (index.html) — Mahesh K, May 17 '19 at 12:43

score -1 · Answer 1 · answered Apr 05 '19 at 15:34

-1

Your post does not really explain your problem at all but I suspect this might be your problem.

Go to your S3 bucket where your website is hosted and after the files are uploaded, go to the Properties tab and click the Static website hosting option. Choose the “Use this bucket to host a website” option and supply index.html to both the “Index document” and “Error document” fields. This will make sure your request to S3 let's say /react/second does not try to access the /react/second key in the bucket like it would normally do.

answered Apr 05 '19 at 15:34

Jean-Michel Provencher

705
5
15

1

I don't have any issues to enter index.html, the issue is that it can't initialize my componenet due to the URL structure with S3, since its static and can't be changed. It can't route through index.html since the component would be in index.html/first | index.html/second. and since this routing which is mentioned above isn't possible I guess I can't display my app. I just guess it isn't possible with react and routing, Just with pure React without routing. – Zot3x Apr 08 '19 at 12:46
To explain it further to you; the flow would be -> index.html, which initializes index.js which contains the routing, since it can't be defined as a relative path it just won't work since thats just way routing works with react. – Zot3x Apr 08 '19 at 12:49
#useful @helpful => https://stackoverflow.com/questions/39783099/deploying-react-redux-app-in-aws-s3 – Mahesh K May 17 '19 at 12:38

S3 bucket can't load React application with routing

1 Answers1