Deploying a full-stack dApp to Google Cloud

In the previous tutorials in this series, we saw how to develop a full-stack ethereum-based blockchain dApp.

In this tutorial, we learn how to deploy the dApp to two of Google's Cloud offerings, Firebase, and Cloud storage.

Google Cloud is a suite of products similar to Amazon's AWS, ranging from computation and databases to storage.

Google Firebase is an abstraction and subset of Google Cloud, making it easier for developers to use Google Cloud infrastructure. For example, Firebase Functions is an easier interface to Cloud Functions. Similarly, Firebase Storage and Hosting is an abstraction built on top of Cloud Storage.

In this tutorial, we cover deploying a dApp to both Firebase and/or Google Cloud Storage.

If you are looking for fully-featured static hosting, then Firebase is the recommended option. Benefits include:

If you would rather have a barebones static hosting solution, then Google Cloud Storage may be more suited. However, you need to have a domain name ready, be OK with changing some domain records and need to set up your own https certificates (if needed).

For more information on the Google Cloud products and options, see the official Serving Websites documentation.

Prerequisites

We assume that you have followed and completed the previous tutorials in this series, and now have:

Firebase

Sign up

  1. Sign up for Firebase using your Google account.
  2. Follow the instructions to create a new Firebase project.
  3. When prompted on the Project Overview page, select Web to create a new web project.
  4. Name your web app and check the box for Also setup Firebase Hosting for this app.
  5. You don't need to add the Firebase SDK, so skip the step if asked.

Local setup

  1. In terminal, install the Firebase CLI:

    shell npm install -g firebase-tools

  2. In the same terminal, sign in to Firebase:

    shell firebase login

  3. Still in terminal, navigate to the fullstack dApp root directory using the cd command (e.g. cd truffle-react-box-frontend/), and initiate the project with firebase init.

    • When prompted, select Hosting, press space bar to select it, then enter to go to the next screen.
    • When prompted, select Use an existing project, then select the project you created on the Firebase website.
    • When asked What do you want to use as your public directory?, press enter. We will change this manually later.
    • When asked Configure as a single-page app (rewrite all URLs to /index.html)?, select y.

Making deployment easy

  1. In your editor, open the newly created firebase.json file.
    • Replace json "public": "public", with: json "public": "client/build", "predeploy": [ "cd client && npm run build" ], This change tells Firebase to build your React dApp frontend, then use those build files to deploy to Firebase Hosting.

  2. You are now ready to deploy. From your terminal (still in the fullstack dApp root directory), enter:

    shell firebase deploy

Accessing your dApp

  1. Congratulations, your dApp is now live, hosted on Google's scalable infrastructure thanks to Firebase. You can access your dApp by going to the provided Hosting URL shown in the terminal.
  2. Whenever you update your React frontend code, repeat step 2 in Making deployment easy to update your live dApp frontend code.

Google Cloud Storage

Initial setup

  1. Select or create a GCP project on the project selector page
    • If you are creating a new project, select the Create in the top right, name your project, and add it to an organization if you would like to keep things organized.
  2. Since we are utilizing Cloud Storage, you need to enable billing on your account. You will only be charged for costs above the generous free tier.
  3. You need to have a domain you own. In this tutorial, we use the domain "example.com" as a placeholder.
    • To verify that you own the domain and can use it with Cloud Storage, you need to follow the steps to verify that you own or manage the domain.
    • If you purchased your domain name via Google Domains, then verification is automatic.

Create a CNAME record

Create a Google Storage bucket

Install the gsutil tool

The gsutil utility helps you use the Google Cloud platform from the terminal. Follow the instructions to Install the Cloud SDK. When prompted, choose the project that you created initially.

Upload the dApp's static files

  1. From the terminal, navigate to the fullstack dApp root directory using the cd command (e.g. cd truffle-react-box-frontend/).
  2. As you would for any React.js based app, create an optimized production build of your frontend:
    • Navigate to the client/ directory and run the command: npm run build

  3. In the same client/ directory, run the command:

    shell gsutil rsync -R build gs://www.example.com

    • This uploads all the contents of your client/build/ directory to the Storage bucket you created

Make all files in your bucket publicly accessible

  1. Since we are only hosting a static website in the bucket, we want all the files to be publicly readable.
    • In the Cloud Storage browser, select the dApp's website bucket you created.
    • Select the Permissions tab.
    • Select Enable in the Simplify access control with Bucket Policy Only alert.
    • Confirm the selection.
    • Select Add members and enter "allUsers" in the New members field, with the "Storage Object Viewer" role.
  2. Your bucket is now publicly accessible.
    • If you set up the CNAME record properly and has propagated, your domain name points to the bucket's contents.
    • Congratulations, your dApp is now live, hosted on Google Cloud Storage!
  3. Whenever you update your React code, follow the steps in Deploying your dApp to update your deployed dApp.