.png)
With its performance and customizability, Dart Frog offers Flutter teams a great way to speed up development by introducing Dart on the backend. At Fluttercon USA 2024, we showed how Dart Frog can integrate smoothly with AWS resources to build a full-stack cloud solution that maintains clear separation of concerns between frontend and backend while speeding up development for Engineering teams.
Why AWS?
AWS Amplify offers a quick and easy way to get a Flutter app running with Amazon services. Since upgrading to Gen 2, Amplify has used a code-first approach to defining backends. Developers define resources in Typescript files, which the AWS Cloud Development Kit (CDK) uses to generate and provision cloud infrastructure. Sandbox environments offer isolated services that developers can use in pre-production environments to speed up development, and hosting can be connected directly to a project repository for easy deployment.
While it is possible to connect Amplify directly to a Flutter app, you can also take advantage of several pure Dart packages the Amplify team has created to connect Amplify directly to a Dart Frog backend. Additionally, the AWS V4 Signer (also published by the Amplify team) allows connection to virtually any other AWS Resource not supported by an existing Dart package.
Amplify & Dart Frog are better together
Integrating Amplify with Dart Frog allows for cleaner separation of concerns between frontend and backend responsibilities. Dart Frog acts as an interface layer between the Flutter application and AWS resources, managing traditional backend concerns like data access/manipulation, domain logic, and caching, so that the frontend is only responsible for fetching and displaying data and reacting to user inputs. All interaction between the application and AWS comes on the server side, where traffic can be more easily controlled, which makes apps more secure.
Overall this Backend for Frontend architecture setup is a great way to move as much business logic as possible to your backend. This also allows for quick and easy bug fixes or feature additions to your product that don’t always have to go through the long and sometimes frustrating process of mobile app store review. This puts the power of deployment back into your team's hands and utilizes a language that they are already writing code in daily.
Example: Fluttercon Schedule App
To help demonstrate how teams can take advantage of Dart Frog and AWS Amplify, we created a simple demo of the 2024 Fluttercon USA schedule. The demo is currently live, and the source code is available here. We used Amplify to provision AWS resources for our Dart Frog backend to consume. These resources are defined inside of an Amplify npm package, nested within our Dart Frog app. By default, a new amplify project creates resource files for data access and for authentication. The data access resource provides a schema where we can define our app entities and the relationships between them. The auth resource, meanwhile, defines how users should authenticate to our app. Amplify then uses the typescript resource files to generate AWS resources in the cloud: data tables (these are DynamoDb tables by default, but Amplify is compatible with other databases) for data, and Amazon Cognito user pools for auth.
Our Dart Frog app manages user authentication and data access for the frontend. We validate access tokens fetched from Amazon Cognito using Dart Frog authentication. We fetch data from our Dynamo tables and construct our presentation models to be returned from our endpoints. We also set up a framework for caching data to limit calls to cloud resources. While our caching solution stores data locally on the server, this approach could easily be configured to connect to a cloud caching service, whether Amazon ElastiCache or something different.
Putting all of this authentication and data logic in Dart Frog makes our frontend lean and simple. Here is the pubspec for the frontend app, demonstrating how few dependencies are required when Dart Frog handles the heavy lifting:
The developer experience is also great when creating this solution. In addition to the powerful hot reload that speeds up our Dart development on both frontend and backend, Amplify sandbox resources are automatically re-provisioned when changes are made to typescript configuration files. When the schema needs to be updated, no messy data migration is necessary–just update the data resource in typescript, and the changes will be deployed to the cloud.
When it comes time to deploy the app, Amplify offers options to cater to different teams’ preferences. Amplify hosting provides a platform for hosting serverless web apps with continuous deployment based on Git repositories. Dart Frog, meanwhile, can be deployed in a Docker container to several different cloud services, including AWS App Runner. Since Amplify can be accessed via the AWS CLI, we chose to deploy this app via a Github Actions workflow that builds the Dart Frog solution in Docker and deploys it to App Runner, before triggering a build of the frontend on Amplify. This workflow enables branch-based deployment of the entire stack, with the API url automatically supplied to the frontend based on the name of the feature branch.
This is just one example of how to integrate Dart Frog with AWS resources. Both Dart Frog and Amplify are highly customizable based on your product and team’s requirements. The approach adopted in making this example app uses our scalable best practices to accommodate more complex backends, including different databases, more sophisticated authentication, and additional backend services such as subscription hubs and scheduled tasks.
Let us help you get started with Dart Frog & AWS!
If you found this article helpful, don’t hesitate to share. We would love to hear about Dart being used on any backend, so contact us if you want to share your story as well. If you and your team need help understanding these topics, feel free to reach out!
Watch the full session recording here
.png)
.png)