What is Flutter and AWS Amplify?
Flutter is a Google-created framework developed with the Dart programming language for developing applications that can be deployed as native apps in iOS, Android, and on desktop, as well as built and run in modern browsers. In a nutshell, you develop your code once and then deploy it across several platforms.
AWS Amplify, on the other hand, is a collection of tools and services offered by Amazon Web Services (AWS) that streamlines the development and deployment of web and mobile applications. It is intended to simplify the development workflow for creating full-stack apps, which includes functionality and services for front-end and back-end development, as well as authentication, storage, and other standard application components.
Simplifying Full-Stack Web Development with AWS Amplify
AWS Amplify supports full-stack web development on the front-end by providing a frontend SDK. Javascript, the native web technology, has additional tools and support in the AWS Amplify environment, and you can simply host any of your Javascript web frameworks (Vanilla JS, Next.js, VueJS, ReactJS, and AngularJS) in AWS Amplify with only a few tweaks to your deployment code by running the npm command.
On the other hand, AWS Amplify also enables Flutter/Dart developers with tools such as the Software Development Kit (SDK) to easily interface with AWS services such as AWS Cognito, DynamoDB, S3, and others. It also provides serverless back-end services, which reduces time to market when compared to traditional server setup.
AWS Support for Flutter web hosting
Because the Flutter web framework uses Dart rather than Javascript, it is not your normal web front-end. Instead, you must compile it using the Flutter command line interface (CLI), in order to produce Javascript codes that are compatible with browsers. As of November 2023, AWS Amplify does not include the Flutter command line in their build image, making it impossible to deploy Flutter using the standard Amplify tooling.
Filling in the gaps
I’ll explain to you how to deploy your Flutter web application in AWS Amplify in this blog. Completing the official documentation on this page, which explains how to set up Flutter Full-stack with AWS Amplify, is a prerequisite.
Let’s begin by launching your Flutter project in AWS Amplify when you’ve completed the official guide. In this example, my source code is on Github and my project name is flutterweb.
Connecting your source code repository with AWS Amplify Hosting
Select the Hosting environments, select Github, and click Connect Branch.
Depending on your setup, you might be asked for access permission to your GitHub repository by AWS Amplify.
Step 1 - Add repository to branch
To connect my branch, I click the dropdown and select the repository. In my example, this is cevoaustralia/flutterweb
Once the connection has been made, I select the dev branch and click the next button to proceed to the next step.
Step 2 - Build settings
By now, if you followed the official instruction, the back-end services should have been provisioned.
I chose dev as the Amplify back-end environment and flutterweb as the App Name. In addition, I have to create the amplifyconsole-backend-flutterweb AWS IAM role to allow AWS Amplify the permissions to build and deploy. Once more, if you do not have this IAM role, you may need to create it.
Scroll down further and you will see the AWS Amplify deployment configuration. This is the essential part of this blog, as this is the place where I make Flutter web deployment in AWS Amplify possible.
Click the Edit button and paste the following amplify configuration for building and deployment.
To stick with best practice, copy the code above to the amplify.yml file and add it to your source code repository.
In the preBuild section, I added a command to download the Flutter v3.13.6 source code and placed it in the environment variable PATH, which tells the operating system that there is a flutter command which can be used anywhere in the file system.
The build section is where the downloading of flutter package dependencies happens and where we create build artefacts for flutter to work on the web.
The artefact section tells AWS Amplify where to run the generated files for web consumption.
After I added the script, I closed the edit screen and clicked the Save and Deploy button. This is the time where you and I are going to sit back and have some popcorn.
Testing the deployment
In just a few minutes, my web app is building and after that, deploying.
When the deployment is done, I navigate to the AWS Amplify generated domain and we can see Flutter running on AWS Amplify web hosting.
Conclusion
I hope you learned something new in this blog that helps you speed up your Flutter development journey in AWS.
