How do I host a React app in Google Storage Bucket behind Cloudflare?

I have a small static website in React that I want to deploy to Google Storage Bucket.

I have a router.jsx similar to this

<Route component={App}>            
  <Route path="/" component={AuthenticationFirewall(AccessSecurity(MainPanel), Login)}>
     <IndexRoute component={Homepage} />
     <Route path="/companies" component={Companies}>
       <IndexRoute component={CompaniesTable} />  
       <Route path="/companies/:id" component={CompaniesDetail} />
     </Route> 
  </Route> 
</Route>

When I access the index page and I click through everything to, say, /companies/12, everything seems ok.

However, when I access the domain.com/companies/12 directly from a link (no previous clicking to get there), I get a 404 error.

The Bucket’s webserver doesn’t allow me to set something I’d set in nginx

 location / {
    root /var/www/;
    try_files $uri /index.html;
   }

to handle the routes correctly.

I also want to have Cloudflare’s http proxy because of the https and I feel like there might be something wrong with them serving their custom 404 error pages.

Questions:

  • How do I set the Bucket’s webserver to serve the js app routes correctly?
  • Do I need to set something on Cloudflare’s webserver part?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The main trick is:

The Google Storage Bucket’s webserver needs to serve index.html in case of 404 errors

Set the webserver

Cloudflare:

You need to disable a feature called Smart Errors in Page Rules

How do I host a React app in Google Storage Bucket behind Cloudflare?
so that the Cloudflare’s webserver let’s the Bucket to handle the errors “correctly”

More here:
https://www.ackee.cz/blog/en/how-to-host-static-react-apps-in-google-storage-bucket-behind-cloudflare-cdn/


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x