Hosting Flutter Web Applications with Amplify Hosting and GitHub Actions

Flutter’s vision is to be the portable UI framework for building beautiful applications for all platforms (source: Flutter Medium). With the announcement of Flutter 2.0 at March 2021, Flutter’s Web support hit the stable release.

In this article, you will learn about hosting your Flutter Web applications over Amplify Hosting by automating your deployments with GitHub Actions and Amplify Hosting’s git based workflow settings.

Requirements:

• An AWS Account (You can check this guide for creating an AWS Account, if you do not have an account)
• A Flutter project with Web support hosted on GitHub (the repository can be public or private)

Example Application

The app that you are going to be seeing is an application called Kahveinn. The application shows trivial coffee related information. You can find information about coffee beans, coffee makers and making coffees.

Here is a GIF to walk you through the application:

You can also reach out to the application over GitHub.

Let’s start by deploying your project from GitHub.

Setting up GitHub Actions

GitHub Actions is the CI/CD tool that GitHub created for building, testing and deploying your code directly from GitHub. You can hook your integrations to your workflows.

In your GitHub repository, go to the Actions tab and click on the Set up a workflow yourself option

This will open a text editor for you to create your first workflow. Remove everything from the editor.

After you removed everything from it, paste the following code inside the editor:

The code in the gist above does the following:

• (1): Triggers the workflow only when someone pushes a change on main branch.
• (2): Checks out project, sets up Flutter as an environment and builds a release for Web
• (3): Copies the Flutter Web release build files that is created earlier into an artifacts folder in the project
• (4): Commits the copied files by using Git Auto Commit action

Now you can commit these changes to your project.

After you commit, your first action will run, and it will fail, and it is okay. You are missing a script to create artifactsfolder and copy the release build in it.

At your base project folder, create a file called createandcopytofolder.sh and paste the code below into it.

This script will:

• Check if artifacts folder exists and if it does removes it,
• Creates an artifacts folder
• Copy the release build elements in it.

After you commit that script and run your application, your action should be successful and you should see artifacts folder with web build inside it.

Setting up Amplify Hosting

AWS Amplify Hosting is a fully managed CI/CD and hosting service for fast, secure, and reliable static and server-side rendered apps that scale with your business. Supports modern web frameworks such as React, Angular, Vue, Next.js, Gatsby, Hugo, Jekyll, and more.

Since Flutter Web’s release build outputs are actual web components, Amplify Hosting will automatically support deploying that as well.

Let’s start by connecting the earlier created artifact to the Amplify Hosting.

First go to the Amplify Hosting and click on the Host your web app button on the website:

This will take you to a page to pick either a git provider or deploy it without one. For this example, you will pick GitHub but you can pick any of the options from below:

It will ask you to login with your AWS account, be sure to have an account before you move forward

After GitHub is picked, the browser will take you to install AWS Amplify to your organization, profile, or only to a repository.

On GitHub you will be:

• Selecting the profile or organization you would like to setup the Amplify
• You can define the repositories that you would like to add Amplify to
• You can also see the permissions that have been given to the Amplify

Once you set up the application. You will be directed back to the Amplify Hosting page again and you will be able to see the project/s that you allowed.

You can pick any project and any branch from the selected project the set up your project. For your Flutter Web step, one important point is clicking on the Connecting a monorepo? Pick a folder checkbox and add artifacts/web path to the field that is shown and click on next:

In the next page, according to your project type and information you have entered before, Amplify Hosting will generate a build file. You do not need to touch that, you can go to the next page.

On the next page, you can check your build settings and click on the Save and Deploy button if everything is as expected.

Once your application is saved, it will start the deployment process. Just wait for a couple of minutes until all the deploy steps are green:

Once everything is green, click on the URL that is indicated with the arrow above and you should see the first deployment of your Flutter Web application!

BONUS! Adding Custom Domain to your Website

Most of the time, folks have a tendency to use generated URLs for their Flutter Web applications. But, if you want, you can also setup your domain name.

Click on the Domain management on the left pane and click on the Add domain button on the domain management page.

After that, you will be directed to a page to enter your domain address and click on the Save button by leaving all as it is.

This will initiate the process for creating an SSL certificate and domain activation.

For domain activation and SSL configuration, check this link for how you can activate custom domain for provider. You can find guides for Google Domains, GoDaddy etc.

Once you add the domain successfully, you can see under Domain management that the custom domain is active and available.

Wrapping up

Flutter for Web and its support created a demand from the community for hosting options and now you know how you can host your Flutter Web applications over Amplify Hosting with GitHub actions. You can try these steps out with your next Flutter Web project!

For more information about the AWS Amplify libraries you can check the official documentation, if you have any questions regarding to the Amplify and Flutter topics you can either ask it at Amplify Discord or send it to me via DM on Twitter!