Solving HTTP 404 for GCP Storage Bucket Hosted Single Page Web App

Storage buckets are a simple low-cost solution for web hosting that is well suited for serving static websites. However, what if we want to serve a single page application (SPA) such as a ReactJS app? Here we will go over a key search engine optimization (SEO) that may be needed to get your SPA indexing!

Photo by Taylor Vick on Unsplash

Pre-requisites

You have a web application deployed to a Google Storage Bucket similar to this and need it to be indexable by a search engine.

The Problem

The command below shows a possible way to serve a SPA hosted on GCP’s object storage.

gsutil web set -m index.html -e index.html gs://bucket.example.com

Since the routing is performed client-side, some URLs do not map to actual files in the bucket. Thus, a 404 HTTP status will be returned. An end user would not perceive any effect from this but it would be disastrous for search engine indexing.

The Solution

To address this, enters pre-rendering! The idea of pre-rendering is to have a matching html file for every URL instead of a single index.html on the root path.

A simple way to pre-render a react application is using the React Snap library. To add the…