How to deploy Flutter WebApp using Google AppEngine

Teresa Wu

4 min readMar 28, 2021

This is a series of Google Cloud Platform study notes:

Domain, SSL, and Google Site (#1)

How to Deploy Flutter WebApp using Google AppEngine (#2)

How to Deploy Flutter WebApp using Google Cloud Run (#3)

How to Deploy Flutter WebApp using Google Compute Engine (#4)

Google provides various web hosting options: Compute Engine with Virtual machine, App Engine, Container, firebase, and Cloud functions. The table below might help you make choices.

+--------------+---------------------------------------+
| Static site  | Firebase hosting                      |
+--------------+---------------------------------------+
| Dynamic site | Compute Engine, App Engine, Cloud Run |
+--------------+---------------------------------------+

In this article, we will focus on AppEngine so by the end of it. You should be able to host your Flutter project using this tool. Before we start, let’s quickly look at Cloud Run and App Engine.

Cloud Run

Google fully managed serverless application platform
You pay for the exact resources being processed
Sitting on Google Kubernetes Engine
A new way of hosting using container
Container to production in seconds

App Engine

Google fully managed serverless application platform.
Always run with at least one instance
Sitting on Virtual Machine
Easy to deploy - add code

Create a Google Platform Project

We need three things to deploy the WebApp: a cloud project, App Engine, and billing account. So first, go to Google Cloud Platform to create a project.

Google gives the new user a free $300 credit for 90 days to try the GCP suite, so even though you need to set up the billing, you won’t be charged if you stay within your free quota. But I would recommend setting up budget alerts to stay on top of your spending. You can always disable it during the development period and enable the app engine server on-demand with one click.

And one last thing to finish setting up the GCP project - enable the Cloud Build API.

Set up App Engine

Now that we have a project with Google Cloud, the next step is to set up App Engine.

Download and install the Google Cloud SDK so that you can perform cloud actions later on, i.e., deploy and start a browser.
Enable App Engine and run in a terminal. Choose a location where you want the server to be located.

gcloud app create

Once the above step is completed, go to Google Cloud Platform > App Engine, your home page should look similar to the one below.

Create a Flutter WebApp

*Prerequisite: IntelliJ or VS Code IDE with Flutter build environment

Create a new Flutter project with Android/iOS/Web enabled, or use your existing Flutter project if you have one, change the root folder's name to be the same as your project ID. Create an app.yaml file in the root folder, which configures the App Engine setting and tells how to map the URL of your index.html.

Copy the following content into your app.yaml file.

runtime: python39

api_version: 1
threadsafe: true

handlers:
  - url: /
    static_files: web/index.html
    upload: web/index.html

  - url: /(.*)
    static_files: web/\1
    upload: web/(.*)

The project directory looks like this.