Serving react app via Google Cloud Storage and loadbalancer, mapping any urls to index?

Viewed 722

I'm setting up React app frontend with Google Cloud Storage and Loadbalancer. During build, index.html and javascript file is uploaded into cloud storage. Loadbalancer points to backend bucket. I can now access react app if I go to http://(loadbalancerip)/index.html

I want to react to handle all routing, and I also want our user to access site via arbitrary path (eg http://(loadbalancerip)/user/details). Is there a way to achieve this with GCP load balancer? Basically I want it to always serve "index.html" regardless of path user is accessing.

3 Answers

You can achieve this by configuring the website settings on the bucket. Configure the 404 page to serve index.html. When the user hits any random route, they will be served index.html. The only downside I can see is you do get a 404 error in the console, but that doesn't seem to affect operation at all.

My loadbalancer is configured with only the default rule, serving all traffic to the bucket backend (no additional url map rules).

enter image description here

Assuming you are using HTTP(S) External Load Balancer, what you are looking for is URL rewrite.

Related