Host a static site single page app in Google Cloud Storage with routes
Clash Royale CLAN TAG#URR8PPPHost a static site single page app in Google Cloud Storage with routes
There are guides and questions all over the place on how to do this, but never really a concrete answer that is satisfactory. Basically, I'm wondering if it's possible to host a static SPA (HTML/CSS/JS) in GCP Cloud Storage.
The main caveat of this is that the SPA has its own routing system (ReactRouter) so I want all paths to be served by index.html.
Most guides will tell you to set the ErrorDocument to index.html instead of 404.html. While this is a clever hack, it causes the site's HTTP response code to be 404 which is a disaster for SEO or monitoring tools. So that will work, as long as I can change the response code.
index.html
404.html
Is there any way to make this work? I have CloudFlare up and running too but from what I can tell there are no ways to trim the path or change the response status from there.
2 Answers
2
A good approach here is to use Google App Engine to host a static SPA. https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website
You can use the app.yaml file to map urls to the static file. Here’s an example:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: www/index.html
upload: www/index.html
- url: /(.*)
static_files: www/1
upload: www/(.*)
Documentation for app.yaml https://cloud.google.com/appengine/docs/standard/python/config/appref
I can confirm that it's not possible to change the response code with the bucket redirection. So if you'd like to serve all paths by index.html using buckets, you'll have the 404 response code. However I tested this example with App Engine and works as intended. I was able to serve all by index.html without getting 404. App engine has a free tier so you can take a look at it. cloud.google.com/free/docs/always-free-usage-limits#gae_name
– Federico Panunzio
Apr 11 at 12:20
According to This blog, you can achieve this by pointing both main page and error page to index.html with the web configuration. I have not tried it personally, I went with firebase hosting right now. But let me know if it works.
index.html
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Thanks for the answer, this is definitely a viable option. Unfortunately it's also a somewhat heavy and costly option when all we're really talking about is serving up some HTML/JS files. We want to be hosting dozens of these SPAs so I'm hoping to find a way to do it with GCP buckets as the backend.
– Matt Dodge
Apr 3 at 17:36