Google App Engine — Cloud Storage Website and React Applications

Google App Engine is a great alternative to the basic way to host a static website through Google Storage. Google Storage offers a way to create a bucket that will act like a static website and CDN, although it is very basic and does not support rewrites (Especially to handle the routing of your single page applications written in React, Angular, or Vue JS) or forwarding rules (HTTP to HTTPS). One way we can get around this is to use App Engine.

Storage Website

First we will create a static website through Google Storage. Our code will need a place to live, so let’s create a bucket. Go to the Storage Browser section in your Google Console.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

App Engine

There is an app written in Go where you can setup rewrites and forwarding for your buckets. Download or clone this repo:

"www.example.com": {  // Google Storage Bucket name
"rewrites": [
{
"source": "**", // Rewrite files to use index.html
"destination": "/index.html"
}
],
"cleanUrls": true,
"trailingSlash": false
}
gcloud app deploy

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store