Deploying Flutter Web Apps to AWS Amplify with CI/CD

Introduction

Deploying a Flutter web app on AWS Amplify brings the power of scalable hosting, automated CI/CD pipelines, and streamlined environment management. This tutorial guides you through initial setup, Flutter web configuration, CI/CD integration, automated deployment and monitoring. You’ll learn to maintain a robust delivery process and leverage AWS Amplify’s features to keep builds consistent and responsive.

Setup AWS Amplify

Before you begin, install the Amplify CLI and configure credentials:

• Install Amplify CLI globally:

  npm install -g @aws-amplify/cli
  amplify configure

• Follow the prompts to create an IAM user and set up a profile.

• Initialize a new Amplify project in your Flutter repository root:

  amplify init

• Choose your project name and environment (e.g., dev).

• Select javascript as the framework, then flutter when prompted for source directory.

After initialization, add hosting with the Amplify Console:

amplify add hosting
# Select 'Continuous deployment (Git-based deployments)'

This creates a Git webhook in Amplify Console and provisions an S3 bucket and CloudFront distribution.

Configuring Flutter for Web

Ensure your Flutter project targets web before integrating with Amplify:

• Enable web support:

  flutter channel stable
  flutter upgrade
  flutter config --enable-web

• Verify web device:

  flutter devices

• Update index.html in web/ if you need custom tags or meta headers.

Add Amplify dependencies in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  amplify_flutter: ^1.0.0
  amplify_auth_cognito

Initialize Amplify in your main.dart before runApp:

import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final auth = AmplifyAuthCognito();
  await Amplify.addPlugins([auth]);
  await Amplify.configure('your-amplify-config');
  runApp(MyApp());
}

Replace 'your-amplify-config' with contents from amplifyconfiguration.dart.

Implementing CI/CD with Amplify

Amplify Console automatically sets up a CI/CD workflow when you connect a Git repository:

• In the Amplify Console, connect your GitHub, GitLab or Bitbucket repo.

• Choose the branch to deploy (e.g., main).

• Amplify reads amplify.yml in your repo for build instructions. A sample amplify.yml:

  version: 1
  frontend:
    phases:
      preBuild:
        commands:
          - npm install -g @aws-amplify/cli
          - flutter pub get
      build:
        commands:
          - flutter build web --release
    artifacts:
      baseDirectory: build/web
      files:
        - '**/*'
    cache:
      paths
  
  

• Commit and push amplify.yml. Amplify Console will pick up changes and trigger your first build.

Automating Deployments

Continuous deployment ensures every push to main results in a fresh build and deploy:

• Environment variables (API keys, secrets) can be added under App settings > Environment variables in Amplify Console.

• Use the Amplify CLI to manage backend changes:

  amplify add api
  amplify push --y

• The Amplify Console will detect cloud backend updates and deploy both frontend and backend in one pipeline.

Tips for stable deployments:

• Pin dependency versions in pubspec.yaml.

• Run flutter test in amplify.yml under a test phase:

  phases:
    preBuild:
      commands:
        - flutter test

• Use Git tags or branch patterns for staging and production.

Monitoring and Testing

After deployment, maintain uptime and performance:

• Amplify Console provides build logs, deploy history, and domain management.

• Enable CloudWatch metrics for CloudFront and S3 to monitor traffic and error rates.

• Set up AWS CloudWatch Alarms for:

  • High 4xx/5xx error rates

  • Unusual request latencies

• Use AWS CodeBuild test reports integration to surface test results in Amplify Console.

Local testing tips:

• Use flutter serve to test incremental changes:

  flutter pub get
  flutter run -d chrome

• Validate UX on multiple browsers and screen sizes using Chrome DevTools Device Toolbar.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By combining Flutter web with AWS Amplify’s CI/CD, you get automated builds, secure environment management, and global hosting powered by CloudFront. This workflow accelerates feature delivery for mobile development teams and ensures consistent deployments. With Amplify’s monitoring tools and custom build scripts, you can maintain high uptime and iterate rapidly.