Deploying a Flutter Application on AWS Amplify with Code in GitHub | by Ali Hamza | Medium

Flutter is a popular open-source framework for building natively compiled mobile, web, and desktop applications from a single codebase. AWS Amplify is a set of tools and services that helps developers easily build, manage, and deploy full-stack applications with a scalable backend.

This article will explain how to deploy a Flutter app on AWS Amplify using a GitHub repository, utilizing the AWS Amplify Console (GUI) for an intuitive, visual deployment process.

AWS Amplify simplifies the process of building and deploying modern applications by providing cloud-based services such as authentication, storage, APIs, and hosting. It integrates smoothly with Flutter, making it easier to deploy mobile and web applications with just a few steps.

In this process, GitHub acts as the version control system that stores the Flutter app’s code. AWS Amplify pulls the code from the GitHub repository and uses a CI/CD pipeline to automatically build, test, and deploy the app whenever new code is pushed.

With the AWS Amplify Console, you can manage your app’s deployments visually, without needing to write complex configuration files. This guide will walk you through deploying a Flutter app with minimal configuration.

Before you start deploying your Flutter application on AWS Amplify, ensure you have the following:

  1. Flutter SDK installed and configured on your local machine.
  2. A GitHub repository with your Flutter project code.
  3. An AWS account and basic familiarity with the AWS Management Console.
  4. A functional AWS Amplify Console setup (no prior knowledge needed as the steps are explained).

Step 1: Setting Up the Flutter Application

  • If you already have a Flutter app, ensure it is working locally.
  • If not, create a new Flutter app:
flutter create my_flutter_app
cd my_flutter_app
  • Test the app locally by running it using:
flutter run

Push the Code to GitHub:

  • Initialize a Git repository, commit your code, and push it to GitHub:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin
git push -u origin main

Step 2: Configuring AWS Amplify via Console

  • Log in to the AWS Management Console and navigate to AWS Amplify.
  • On the Amplify Console dashboard, click “Get Started” under “Host your web app.”

Connect to GitHub:

  • In the Amplify Console, select “GitHub” as your source code repository.
  • Click “Connect” and authorize AWS Amplify to access your GitHub account.
  • After connecting, choose the repository and branch where your Flutter app is stored.

Configure Continuous Deployment:

  • Once connected, select “Continue”. Amplify automatically sets up a CI/CD pipeline for the app, meaning every new commit to your GitHub branch will trigger a new build and deploy process.

Step 3: Configuring Build Settings in the Amplify Console

After setting up the GitHub integration, Amplify will ask for the build settings to correctly deploy your Flutter app.

Set Up Build Settings:

  • In the “Build Settings” step, you will configure how Amplify builds and deploys the Flutter app.
  • Modify the default build settings to suit Flutter’s requirements. Use the following configuration in the amplify.yml file to build a web version of the Flutter app:
version: 1
frontend:
phases:
preBuild:
commands:
- flutter pub get
build:
commands:
- flutter build web
artifacts:
baseDirectory: build/web
files:
- '**/*'
cache:
paths:
- node_modules/**/*
- build/**/*

Save and Deploy:

  • Click “Save” to apply the build settings and start the build process.

Step 4: Deploying the Application via Amplify Console

Deploy the App:

  • Once the build settings are saved, Amplify automatically starts the deployment process.
  • You can monitor the build logs directly in the Amplify Console. This gives you real-time feedback on the build and deployment status.

Test the Deployed App:

  • After the deployment finishes successfully, Amplify will provide a live URL for your deployed Flutter web application.
  • Visit the URL to verify that your Flutter app is running as expected.

Step 5: Managing and Testing the Deployed Flutter App

Manage Deployments:

  • AWS Amplify Console allows you to easily manage the deployed versions of your app. You can roll back to previous versions, monitor app performance, and set up custom domains.

Custom Domains and SSL:

  • In the Domain Management section, you can connect a custom domain to your app, and Amplify automatically provisions SSL certificates for secure HTTPS traffic.

View Logs and Troubleshooting:

  • If there are any issues, Amplify provides access to build and deployment logs. You can use these logs to troubleshoot any errors that occur during the deployment process.

Deploying a Flutter application on AWS Amplify using GitHub is a straightforward process thanks to the Amplify Console’s user-friendly interface. By connecting your GitHub repository to AWS Amplify, you can automate the deployment of your Flutter app with ease, while managing and scaling it directly from the cloud.

Whether you’re building a small prototype or scaling a large app, AWS Amplify provides the tools you need to deploy, monitor, and manage your Flutter app efficiently.