[Feedback]Deploy and Host for Flutter Web Apps

[rezangit]

Page: /start/getting-started/nextsteps/q/integration/[integration]

Feedback:

The Deploy and Host app is missing for flutter web apps, could someone please fix it.

[abdallahshaban557]

Hi @rezangit - In the meantime, you can use this documentation for that guidance. We are working on creating a guide for this. https://medium.com/flutter-community/hosting-flutter-web-applications-with-amplify-hosting-and-github-actions-d53ba213767

[Perondas]

This tutorial seems to be out of date. While setting up, it is impossible to get past the repo selection step.

[Perondas]

After some digging I managed to come up with the following solution:

Put this at the root of your project as amplify.yml

version: 1
backend:
  phases:
      build:
          commands:
            - 'npm ci --cache .npm --prefer-offline'
            - 'npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID'
            - 'npx ampx generate outputs --format dart --outputs-version 0 --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID'
            - 'npx ampx generate graphql-client-code --format modelgen --model-target dart --out lib/models --branch $AWS_BRANCH --app-id $AWS_APP_ID'
  cache:
    paths:
      - .npm/**/*
      - node_modules/**/*
frontend:
  phases:
    preBuild:
      commands:
        - git clone https://github.com/flutter/flutter.git -b 3.22.1 --depth 1
    build:
      commands:
        - ./flutter/bin/flutter pub get
        - ./flutter/bin/flutter build web
  artifacts:
    baseDirectory: build/web/
    files:
      - '**/*'

Its by no means optimal, but it allows you to deploy a Flutter web app fairly easily.

[aalloul]

Hello, may I jump on this thread and ask whether you guys are seeing this error

Error: Error when reading 'lib/amplify_outputs.dart': Error reading 'lib/amplify_outputs.dart' (No such file or directory)

I know that for the sandbox environment, you can generate the file with npx ampx sandbox how do you do it for production in the CI/CD that Amplify UI offers? FYI I used the amplify.yaml that @Perondas provided.

[aalloul]

Actually (and sorry for spamming), I was able to fix it with the following line in the preBuild under frontend

        - npx ampx generate outputs --app-id $AWS_APP_ID --branch $AWS_BRANCH --format dart --out-dir lib