How to deploy a static React site to Google Cloud Platform

Looking at the few guides out there, I was pretty confused when trying to find out how to deploy my app.

I looked at a few guides from Google’s site and some Stack Overflow posts but didn’t find them too helpful.

I found a great resource which got me 70% there on MDN:

How do you host your website on Google App Engine?

Filling in a few gaps I was able to deploy my static React site. So here’s my guide, in a few easy steps.

Tools we’ll use:

• create-react-app cli tool
• Google cloud platform (I’ll call it GCP for short)

Note: we’ll be deploying a static site which uses React to render the Front End. No backend/server is hooked up in this example.

Let’s deploy!

1. Create a react app using the create-react-app cli tool, add your code, assets, etc. For this example we’ll use the command create-react-app test-app where a directory called test-app will be created with all my app files.
2. Move into the test-app directory and create a minified bundle of your project using the npm run build command. This will create a new folder called build that has all the files necessary for deploying your static React site.

$ cd test-app
$ npm run build

3. Create a bucket in GCP. You can keep the default values, just click create.

We’ll be using this bucket to easily upload our build folder files into GCP. Afterwards we’ll transfer the files to our GCP project. Take note of the bucket name as we’ll be using this later. This bucket’s name is straight-veld-8658

4. Once the bucket has been created, click into it and select upload files. Browse to your project directory and upload the entirebuild folder.

5. Another thing we need is an app.yaml file. This file is a config file that tells the App Engine how to map the URLs to static files. I’ve used the same app.yaml file as provided in the sample-app of MDN’s tutorial (but have changed the website directory to build. It looks like this:

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: build/index.html
  upload: build/index.html
- url: /
  static_dir: build

Upload this file to the bucket as well.

Your bucket should now be populated with the following files:

6. On the same page find the icon that lets you open a Google Cloud Shell to your app instance. Click on it and open the shell.

Now we’ll upload the build directory and app.yaml file that we uploaded into the straight-veld-8658 bucket into our instance so we can launch the app. Use the following commands:

$ mkdir test-app
$ gsutil rsync -r gs://straight-veld-8658 ./test-app

Note: the format of the gsutil rsync command is as follows : gsutil rsync -r [source] [destination] (-r means sync files recursively)

You can make sure that the files are there. When you cd test-app and ls you should see both app.yaml and build

7. Deploy the app by running gcloud app deploy in the shell. You should see some sort of success message indicating the app is served. It should also provide you with the url you can visit to see the app.

Generally this url is in the following format unless you’ve linked a custom domain name to it: https://[app_name].appspot.com