Debugging and Deploying a Flutter Web App To App Engine Flex

Debugging and deploying a Flutter web app with Dart HTTP web server to App Engine Flex

Project Configuration

Setting	Value
Purpose	Debugging Flutter web app with dart web server hosted on App Engine
Client	Flutter web app
Server	Dart http web server
Client Language	Dart
Server Language	Dart
Architecture	Flutter/Dart
IDE	Visual Studio Code
CI	Travis CI
Hosting	App Engine Flex
License	GPL v3
Tutorial	Youtube Tutorial

Debugging

Debugging Client CLI

• Run cd ./client to change into the server directory.
• Run pub get to initialize the project.
• Run flutter run -d chrome

Debugging Server CLI

• Run cd ./server to change into the server directory.
• Run pub get to initialize the project.
• Run dart ./lib/server/server.dart

Debugging with VS Code

• Use the VS Code Launcher 1. Launch Server
• Use the VS Code Launcher 2. Launch Flutter Web App

VS Code Endpoints

• http://localhost:54432/#/ - client
• http://localhost:8080 - server
• http://localhost:8080/api - server
• http://localhost:8080/api/getMessage - server

Debugging Docker

Used for debugging deployment config.

Debugging Docker Container

• Run sh ./debug-docker-container-config.sh
• Open http://localhost:8080

Docker cmd	Details
docker ps	list the docker containers and [container id]s
docker exec -it [container id] bash	/bin/bash into the container. (The container name could be used as well.)

Init Reference

Install Dart

The dart tools are required to use this project.

Install VS Code Dart Plugin

Install the Dart VS Code plugin.

Add the program launcher, to launch the web server.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Web Server",
      "program": "lib/server.dart",
      "request": "launch",
      "type": "dart"
    }
  ]
}

Generate Flutter Web App

• Generate a Flutter Web App Instructions
• I ran flutter create client to create an app named client.

Cloud Tools CLI Installation

1. Sign up for Google Cloud Compute.
2. Create a GCP project.
3. Create an App Engine Application https://console.cloud.google.com/appengine/start.
   • This app is Node.js & a Standard App Engine deployment.
   • Download Cloud SDK CLI tools
   • Run gcloud init
   • Run gcloud app create - create a flex project
4. Create a service account for App Engine Admin for deployments.
   • And be sure you add the Cloud Build API permissions to the services account.
   • And turn on the Cloud API Dash for the project.
5. Create an App Engine project in the console https://console.cloud.google.com/appengine.
   • After you create an app engine project, follow the App Engine getting strted instructions on how to install Cloud CLI.

app.yaml

app.yaml configures the App Engine web hosting service options. app.yaml reference