Back

Hosting a Flutter Web Application with AWS Amplify Gen 2

Source: https://github.com/agnostech/flutter_amplify

Introduction

Flutter is a powerful UI toolkit that enables developers to build cross-platform applications for mobile, desktop, and web from a single codebase. With seamless web deployment capabilities, developers seek efficient hosting solutions. AWS Amplify Gen 2 introduces several new features, including an improved integration with Git workflows for both backend and hosting solutions, facilitated by Amplify Console’s enhanced UI.

In this guide, you will learn how to host a Flutter web application using Amplify Hosting with project code stored on GitHub. This tutorial applies to any supported Git provider, including BitBucket, GitLab, and CodeCommit.

Prerequisites

Before starting, ensure you have:

Creating a Flutter Web Project

Begin by creating a new Flutter project with web support using the following command:

flutter create amplify_gen2_website --platform web

This command generates a Flutter project with only web support enabled. Next, upload the project to GitHub using your preferred Git tool. Here’s how to do it using VSCode:

  1. Open the project in VSCode.
  2. Open the Command Palette using Shift + Command + P (Mac) or Ctrl + Shift + P (Windows/Linux).
  3. Select “Share on GitHub”.
  4. Choose between a private or public repository, name your repository, and publish the project.
  5. Once uploaded, verify the repository on GitHub.

Deploying on AWS Amplify

Step 1: Create a New App

  1. Navigate to AWS Amplify in the AWS console.
  2. Click “Create new app”.
  3. Choose GitHub (or your preferred Git provider).
  4. Grant AWS Amplify access to your repository.

Step 2: Configure the Build Settings

  1. Select your repository and branch.
  2. Update the Frontend build command to:
flutter build web

3. Set the Build output directory to:

/build/web

4. Click “Next”, review the settings, and start the deployment.

Step 3: Fixing Build Failure

The initial build may fail due to the missing Flutter toolchain. To resolve this:

  1. Navigate to Hosting > Build settings in the AWS Amplify Console.
  2. Locate and edit the amplify.yml file with the following configuration:
version: 1.0
frontend:
  phases:
    preBuild:
      commands:
        - echo "Installing Flutter SDK"
        - git clone https://github.com/flutter/flutter.git -b stable --depth 1
        - export PATH="$PATH:$(pwd)/flutter/bin"
        - flutter config --no-analytics
        - flutter doctor
        - echo "Installing dependencies"
        - flutter pub get
    build:
      commands:
        - echo "Building Flutter web application with WASM support"
        - flutter build web --wasm
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

3. Save the changes and redeploy the application.

Step 4: Accessing the Deployed Application

Once deployed, AWS Amplify assigns a domain to your application. Click on the assigned domain to view your Flutter web app in action.

CI/CD for Automatic Deployment

To test CI/CD, make updates to your Flutter project, such as changing the app title and color scheme. Commit and push these changes to GitHub. AWS Amplify will automatically trigger a new deployment, and the updated UI will reflect on the hosted application.

Conclusion

In this tutorial, you learned how to host a Flutter web application using AWS Amplify Hosting with CI/CD integration. AWS Amplify Gen 2 simplifies the deployment process and provides a seamless workflow for web applications. To explore more features, check out the official AWS Amplify Gen 2 documentation.