How to deploy Flutter WebApp using Google AppEngine

Photo by HalGatewood.com on Unsplash

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.

  • 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
  • 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.

Deploy the WebApp ✨

  • Build the Flutter app from the command line, and confirm the build/web folder is created
flutter build web
  • Go to the folder where the app.yaml file is located, and type in the command line.
gcloud app deploy
  • To view the app in a web browser.
gcloud app browser

Congratulations! You have now created a Flutter WebApp and deployed it using Google App Engine.

The next step is optional to serve the App Engine hosted website using a custom domain. Read here on how to obtain a domain name in 10 mins.

Mapping Custom Domains

Go to Google Cloud Console > App Engine > Setting > Custom Domain page

** Note: the Flutter WebApp will not fully operate with AppEngine — standard environment, I will explain how to set up Docker in the next article.

☀️ 🌤 ⛅️ 🌥 ☁️ NEXT (and in no particular order) 🌦 🌧 ⛈ 🌩 🌨

Enthusiastic about cloud technology, data, clean code, Flutter, and Agile