Web support for amplify-flutter

[FadilaNuzha]

Bug Description
I created a simple web app to connect to AWS amplify.

But it's throwing the below error.

I have tried 'flutter clear', 'pub get' and creating a whole new project, but nothing works.

To Reproduce
Steps to reproduce the behavior:

1. Follow steps as shown as 'https://aws.amazon.com/getting-started/hands-on/build-flutter-app-amplify/'
2. flutter run -d chrome

Expected behavior
Console should print 'Successfully configured Amplify 🎉'

Platform
[] Flutter Web

Smartphone (please complete the following information):

• Browser [e.g. chrome ]
• Version [Version 86.0.4240.198 (Official Build) (64-bit)]

[haverchuck]

Hi @FadilaNuzha - We don't support Flutter web yet, but we know that this (as well as desktop support) is something that is desired. I'm marking this issue as a feature request.

[jamesonwilliams]

(For those who are interested, support for Flutter Desktop is being tracked separately, in #133.)

[FadilaNuzha]

Hi @FadilaNuzha - We don't support Flutter web yet, but we know that this (as well as desktop support) is something that is desired. I'm marking this issue as a feature request.

Hi @haverchuck, I tried this in an Android device and the emulator as well. Still I'm unable to configure Amplify. So I'll rename the issue. Am I missing something in the process?

[FadilaNuzha]

Hi @FadilaNuzha - We don't support Flutter web yet, but we know that this (as well as desktop support) is something that is desired. I'm marking this issue as a feature request.

Hi @haverchuck, I tried this in an Android device and the emulator as well. Still I'm unable to configure Amplify. So I'll rename the issue. Am I missing something in the process?

Actually it started working with the emulator, so I guess it's a web issue.

[kenspy]

👍 +1
I came across the same issue while migrating my Flutter PWA application to Amplify, I'm glad someone (@haverchuck ) is working on it.

[natedenh]

+1 for web

Thanks for working on this

[shar154]

Web support for amplify flutter would be something I would vote for.

[bjoerndotsol]

I already voted for this but also want to show some support for this topic. Personally, I prefer using a PWA than installing a full application on my computer.

Web is a super fast and easy way to make your service available on a broad range of devices and onboard new users who can, later on, download the app. But it reduces the burden for them to start using the product in the first place significantly.

Example: I don't have an Amazon app on my computer and I wouldn't install it if it would be available, but I use my computer all the time to shop on Amazon.

What you should also consider is that users can:

• use the web service on Mac, Windows, Linux, and any other OS that has a modern web browser,
• install the PWA on their devices (including Desktop).

Therefore I would work on this integration before I start supporting native Desktop OS, but that's just my opinion and I don't want to offend anybody with it!

Thank you so much for working on these topics! Cannot wait to get it on my hands! So far you did a wonderful job with the Flutter SDK :)

[roberthelmick08]

+1 for web support

[rdamus]

+1... Amplify would set the tone for Flutter web as currently even Firebase seems to only have experimental support for web apps with Flutter... seems like a workaround for using Cognito has been developed in Dart - https://pub.dev/packages/amazon_cognito_identity_dart_2

[drowl-developer]

+1 for web support

[capraqua]

+1 for web support

[stuartwk]

For those that just connect Amplify to a github repo for simple hosting, I got it working with the following build settings...

version: 1
frontend:
  phases:
    preBuild:
      commands:
      - git clone https://github.com/flutter/flutter.git -b stable --depth 1
      - export PATH="$PATH:`pwd`/flutter/bin"
    # IMPORTANT - Please verify your build commands
    build:
      commands: 
      - flutter build web -t ./lib/main.dart
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths: []

[clinsign]

+1 for web support
Thanks for working on this

[mheinis]

+1 for web support (this was actually the reason we wanted to use Flutter)

[roelvandenbranddvc]

+1 for supporting Flutter Web. We would like to use all platforms for which Flutter is available. But on web is our main goal.

[BasKroes]

+1 for supporting Flutter Web :-)

[gauravmehta13]

+1

[ghost]

+1

[jamesonwilliams]

The community has currently built (at least) two pure-Dart libraries to interact with Cognito from Flutter Web:

• https://github.com/jonsaw/amazon-cognito-identity-dart/
• https://github.com/furaiev/amazon-cognito-identity-dart-2/

Additionally, here's a customer asking about Flutter web support for Cognito on StackOverflow:

https://stackoverflow.com/questions/66796518/how-to-login-with-cognito-in-flutter-web

[dedvalson]

+1

[bluesky2091]

+1

[abdallahshaban557]

Hi @crolly - we do not have an exact timeline yet, but it is coming very soon! We will share these details on this issue when we have a clear timeline.

@abasu0713 - On the questions you asked:

• I am not sure I understand why you would want to have a Flutter web app that would work on all platforms rather than building the app itself in Flutter. Can you elaborate on that? Is it because you want to be able to push updates to your HTML rendered app without updating the actual app on the device?
• We do not have plans to enable Lex yet, but can you please visit this Github issue and upvote the first initial post. This would help us in measuring interest in the interactions category. In the meantime, you can use the dart signer we have released to integrate with the Lex APIs directly. https://docs.amplify.aws/lib/project-setup/escape-hatch/q/platform/flutter/

[abasu0713]

@abdallahshaban557 thanks for your reply and direction. Of course. I'll be happy to elaborate. I'm working on an idea for PWA. which also has a light weight voice interaction element to it.
You got it right. Since I'm working on this alone, i have decided I would rather spend time on an adaptive design to build a lightweight web app that works on all platforms. I anyways need to write method channels for platform specific implementations. But keeping it limited to web gives me the advantage of writing only 2 channel specific implementations for all target platforms. C++ to target iOS and Web, whereas Java for Android. Rather than designing and building three separate client application UI. I also don't have to worry about app stores and publishing app versions, as my launch time would be greatly reduced. And my CI CD part of the release life cycle for my HTML rendered web app would be greatly reduced.. (or so I think. )..
And in this design a large part of my images are cross origin public images. So I can work without a COORS enabled CDN for now as I prototype. Which limits me to HTML for now.

[abdallahshaban557]

@abasu0713 - got it! What I am struggling to understand a bit now is why would you need platform specific implementations if your plan is just to use webviews for example on iOS/Android/Desktop? Also, just from my experience - app stores would take down your app if you are making substantial changes to your frontend application without undergoing their review process, so I would be very careful about going down that path. We can finish up this conversation separately to respect other folks inboxes that are following this issue. Can you please email me at [email protected]. My email does not last more than 3 months, Or else I would still have your contact info. I remember our last conversation!

[fisforfaheem]

stop this...guys... just tell when amazon amplify webhosting will work like netlifly do

…

On Sat, Mar 26, 2022 at 1:14 AM teddyfl ***@***.***> wrote: Already did :-) On Fri, 25 Mar 2022 at 11:13 PM Abdallah Shaban ***@***.***> wrote: > Hi @teddyfl <https://github.com/teddyfl> ! We do not have exact timelines > yet - but I would love to get a better understanding of your use case, and > what other features you are using from Amplify. Can you email me at > ***@***.*** so that we can coordinate time to chat? > > — > Reply to this email directly, view it on GitHub > < #234 (comment) >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AYNEU2QK3VJXZOA5CWEQTNDVBYM7BANCNFSM4UNFXRCQ > > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> > -- *Teddy Flatau* CEO, Weev Energy +972-54-7769449 | ***@***.*** — Reply to this email directly, view it on GitHub <#234 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIRXJSHSESQEF36RTDJNONLVBYNDZANCNFSM4UNFXRCQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Lorenzohidalgo]

@fisforfaheem not sure if I understood your comment correctly, but you can already host a flutter web project using amplify hosting. It might not be officially supported out of the box, but you can configure it through the aws/amplify console (web UI).

[abdallahshaban557]

@fisforfaheem Here is an example of how to setup Amplify hosting with Flutter web apps as well https://medium.com/flutter-community/hosting-flutter-web-applications-with-amplify-hosting-and-github-actions-d53ba213767

[fisforfaheem]

amazon should focus more

…

On Tue, Oct 11, 2022 at 8:44 PM Abdallah Shaban ***@***.***> wrote: @fisforfaheem <https://github.com/fisforfaheem> Here is an example of how to setup Amplify hosting with Flutter web apps as well https://medium.com/flutter-community/hosting-flutter-web-applications-with-amplify-hosting-and-github-actions-d53ba213767 — Reply to this email directly, view it on GitHub <#234 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIRXJSCM4JM3DMMOTVHVABTWCWDPRANCNFSM4UNFXRCQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ObranS]

It is really bottle neck to move to web desktop version for me

[jamontesg]

+1 for web support

[abdallahshaban557]

Amplify Flutter announces Web and Desktop support (Developer Preview) for API (GraphQL + REST), Analytics, and Storage

Hi everyone,

Today AWS Amplify is announcing a developer preview to expand Flutter support to web and desktop for API (GraphQL + REST), Analytics, and Storage.

With this developer preview version, you can use a single codebase to build Flutter apps that target iOS, Android, Web, and Desktop (Mac, Linux, Windows). We have also written fully this developer preview fully in Dart, providing you with a consistent experience across the platforms you target.

You can read more about this launch in our blog post

Next for us is supporting Datastore as well for Flutter Web and Desktop! Stay tuned!

[oferardi]

Hi @abdallahshaban557

Great progress with the new version..thank you guys. Looking forward for datastore support

Is there any examples implementing a multi tenant app with amplify and flutter?

Thanks

[abdallahshaban557]

Hi @oferardi - Datastore support is next for us! We do not have an exact timeline, but we will share updates on this issue when we have them.

Unfortunately, we do not have a great guide for building multi-tenant apps with Amplify and Flutter. However, enhancing support for multi-tenancy is an important initiative that is a top priority item for the Amplify team!

[murilodag]

Hello @abdallahshaban557,

When trying to use analytics, I get the error: Error: CompileError: WebAssembly.instantiateStreaming(): expected magic word <8 digits>, found 3c 21 44 4f.
Based on this comment, it seems there is a request to /sqlite3.wasm with a incorrect content type. I validated and I could find it. Could you share the right way for making this path work as expected?

Solution: include file at: https://github.com/aws-amplify/amplify-flutter/blob/next/packages/analytics/amplify_analytics_pinpoint/example/web/sqlite3.wasm

[abdallahshaban557]

Hi @murilodag - can you please submit a new Github issue using this link. We will investigate this! Thank you for reporting it!

[jtkeyva]

Is this ready for production? Pub.dev says no, but the blog doesn't say it's not.

[Thembelani]

Not me doing all the config, adding most of the functionality only to land here. :(
Please release this feature.

[jamontesg]

DataStore Web support is ready ?
4 months from last release. Are you on holydays?

[abdallahshaban557]

Hi everyone,

We are excited to announce that we have released the general availability of Flutter web and desktop support for Auth, API (GraphQL + REST), Analytics, and Storage. To upgrade to our latest version, you can follow our upgrade guide. You can see a list of the features and bug fixes we have released in our release notes.

When interacting with GraphQL APIs, use the API category for all platforms or DataStore for Android or iOS. This is because we retained DataStore on the original Android & iOS implementation. We’re looking to bring data synchronization and offline-data experiences to the web and desktop in the future.

[vgribok]

Hi, Amplify Flutter team. Congratulations on the v.1 release - that's really exciting! Regarding the DataStore, it would be so fantastic if the DataStore could be the next focus of your attention: to make it interoperable with GQL API so that a single schema could be used for either access strategy, and to make the DataStore "killer" feature, offline-first - more robust, which is one of the most notable differentiators of the Amplify compared to the competition. DataStore enables building apps for connection-challenged communities around the world, so I hope the team will keep leaning into the idea of "Success and Scale Bring Broad Responsibility" and keep improving the DataStore as it's critical for the huge swaths of the less connected places on the planet. Once again, congratulations and thank you!

[johnchoicl]

Thank you team! It must have been a huge effort to get v1 to live. I will sit tight for the DatStore web support release. Looking forward to it.

[abdallahshaban557]

It really was @johnchoicl - thank you for the kind words. @vgribok We understand how important the DataStore features are for our customers, and we are discussing how to support Web and Desktop in the future, thank you for being one of our power users - we really appreciate your feedback and support!

[dorontal]

Thank you, Amplify Flutter team! Considering how much code there was to convert, this turnaround time has been incredibly fast, and it is also incredibly useful, as browser apps are more universally accessible and more trustworthy than anything else!

[jota2rz]

We’re looking to bring data synchronization and offline-data experiences to the web and desktop in the future.

Any ETA for this?

[abdallahshaban557]

Hi Everyone,

Since we have support for all our categories except DataStore, we are closing this issue and have created a new RFC to get feedback from you on the use cases we need to support with Datastore for Web and Desktop. We are exploring the path forward, and we want to make sure we are fulfilling the use cases you need.

We welcome your feedback on this RFC