Search code examples
flutteramazon-web-serviceswebdeploymentaws-amplify

Missing Build settings in AWS Amplify Hosting for Flutter Web Apps deployment


I'm trying to use AWS Amplify Hosting to deploy my Flutter Web App. as you may know amplify is supporting flutter web apps now, but looks like there is something missing in build settings. after I finished attaching my GitHub repository, the build failed and as you can see in the screenshot the build command is empty. any idea what should we put there for flutter web apps?

enter image description here

I followed this tutorial and as you can see for ReactJS there is something to build the project but it is missing for Flutter Web Apps.


Solution

  • After I talked with the Amplify team, they said they are not supporting flutter web apps in amplify site yet as today 15 jun 2023, but there is a work around. Here is the way I able to deploy my flutter web app using amplify site.

    assumption is your project is in github and amplify initiated, if no please follow this tutorial https://www.youtube.com/watch?v=DHLZAzdT44Y

    then

    if you know how to create github actions, just follow this tutorial and you are good to go deploy your website. https://medium.com/flutter-community/hosting-flutter-web-applications-with-amplify-hosting-and-github-actions-d53ba213767

    if you have issue with github actions like me then follow these steps

    1. you need to build the project on your local using these commands
      flutter config --enable-web
      flutter build web --release
    
    1. then on your project root folder run these commands to create a folder for keeping website image and then copy the build/web files on there
      mkdir artifacts
      cp -R build/web artifacts
    
    1. commit and push the changes to github
    2. now setup your amplify hosting and connect your github, follow this tutorial

    important point is when you are connecting your github repo select the "Connecting a monorepo? Pick a folder" checkbox and add artifacts/web path to the field.

    this way amplify hosting know where is your website image and can deploy it.

    hopefully amplify team will fix the flutter site builder soon...