Debugging and Deploying a Flutter Web App To Elastic Beanstalk

Debugging and deploying a Flutter web app with Dart HTTP web server to Elastic Beanstalk.

Project Configuration

Setting	Value
Purpose	Debugging Flutter web app with dart web server hosted on Elastic Beanstalk
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	Elastic Beanstalk
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

Make sure things work locally in the eb local run runner!

Run eb local run
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.)
eb local run	This will run the Dockerrun.aws.json multi-container configuration

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.

Configure AWS & EB CLI

Configure the AWS CLI and EB CLI utilities.

Run aws configure to configure the AWS credentials locally.

Create Elastic Beanstalk Application

Set up the Elastic Beanstalk application.

Run eb init to configure the Elastic Beanstalk hosting config.

Choose the datacenter that makes sense to you. (I'll choose the default.)
Choose Create New Application and I use the default application name in this example.
Choose Multi-container Docker and the latest version.
Do not choose CodeCommit in this config.
Choose the SSH key to setup SSH, if you want to use SSH.

This will create a project file ./.elasticbeanstalk/config.yml.

Create Elastic Beanstalk Environment.

Set up an Elastic environment for your application.

Run eb create dartserver-staging-v1 where dartserver-staging-v1 is the enviornment name you choose.

Docker Config

The Dockerrun.aws.json will configure the docker container when deployed. In this configuration I won't show how to build and deploy a Docker image to ECR.

branflake2267/debugging-flutter-android-ios-web-dartwebserver