Flutter Community
Published in

Flutter Community

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:

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:

Walk through of the website kahveinn.com

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

GitHub Actions tab of a new project over GitHub

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

Empty editor for GitHub workflows.

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

The code in the gist above does the following:

Now you can commit these changes to your project.

A page to show a button for committing changes from GitHub

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:

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:

Amplify Hosting website main page.

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

Git providers over AWS console for Amplify Hosting.

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

Three steps to install AWS Amplify for the GitHub account

On GitHub you will be:

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.

Successful GitHub authentication page over AWS Console

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:

Page indicating the process of defining the artifact path over AWS Console

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.

Script for deploying web applications (can be skipped)

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

AWS Console page to show save and deploy button

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.

Domain management page over AWS Console with Add Domain button indicator

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.

AWS Console page to add custom domain with an indicator over Save button

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

Overview of SSL Configuration page over AWS Console

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.

Domain management page overview with a custom domain

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store