Skip to content

Latest commit

 

History

History
116 lines (81 loc) · 3.59 KB

File metadata and controls

116 lines (81 loc) · 3.59 KB

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

Build Status

Debugging Video Tutorial

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

Debugging Docker

Used for debugging deployment config.

Debugging Docker Container

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

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