Flutter web app deployment using Github, AWS CodePipeline and S3 Bucket

6 min readDec 8, 2022

It is my first time working with Flutter, but I have experience working in DevOps. Last week I got a chance to work on Flutter web app deployment. You may ask who uses the Flutter app, well we do 😅. Long story short, this article will show how to deploy a Flutter web app as a static website with the AWS CodePipeline and S3 bucket.

Let’s first discuss the requirements.

Requirements

To create a Flutter app with web support, you need the following software:

Flutter SDK. See the Flutter SDK installation instructions.
Chrome; debugging a web app requires the Chrome browser.
Optional: An IDE that supports Flutter. You can install Visual Studio Code(my preference), Android Studio, IntelliJ IDEA. Also install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your web app within an editor. See setting up an editor for more details.
AWS Console access. You can use the free tier for S3 and Codepipeline.

So, let’s smash that bucket.

Initializing the Project

The first thing we need to do is set up the project(obviously 😅). We will use the default settings that Flutter provides us for this project. Detailed instructions for setting up the project are provided in the official document.

If you follow the official flutter document to create an initial project your folder structure should be similar to a given image.

Folder structure after the create a new project

If you run the application in chrome, you must see the given screen.

You can create a GitHub repo for this project. We are all set for the app deployment if you are with me till this screen.

Creating a pipeline using AWS Codepipeline

There are generally three stages we can define for pipelines: source definition, build, and deployment. It is possible to handle all these stages using an AWS CodePipeline. In this section, I will describe each stage in detail.

We can give a pipeline name and use a new service role for this project and AWS automatically creates a service role using your pipeline name. So , there is no big deal here.

Selecting a source stage

As I mentioned earlier, our project is on Github (Version 2), so we will use that as the source of the project. As you select Github, you are asked to connect AWS with Github.

After connecting your GitHub, you can provide the repository name and branch name that you want to deploy.

But if you want to run the build stage on every code push change in the feature branch, you may not use the CodePipeline. Instead, you should go for CodeBuild which is dedicated to testing and building only. Another option would be GitHub Actions.

CodeBuild is a part of CodePipeline but it involves deployment too. So if you just want to test and build the code before any changes merge to the main branch, you should configure CodeBuild.

CodeBuild Stage

As you select the Build stage, you are given the two providers AWS CodeBuild and Jenkins. For this project, we will use AWS CodeBuild.

If you have already created a project using AWS CodeBuild then you can just select that project ready to go for the Deployment but if you haven't created any project then you must follow this step manually.

You can give a project name as you desire
After that, you can limit the number of concurrent builds or leave it as it is with no limits
If you have already created a docker image for build then you can select the docker image but we will go for the Managed Image
We will select Ubuntu as a operating system (why not !) and standard runtime
Now comes the build spec which can be created in your root folder or configured in the AWS build commands. I prefer creating the project as it is more configurable. For this create a buildspec.yml file in the flutter root and paste the following lines of code.


version: 0.2

phases:
  pre_build:
    commands:
      - echo Pre Build started on `date`
      - git clone https://github.com/flutter/flutter -b 3.3
      - export PATH="$PATH:`pwd`/flutter/bin"
      - flutter packages pub get
      - flutter config --enable-web
      - flutter test
      - flutter clean
  build:
    commands:
      - echo Build started on `date`
      - flutter build web --release
  post_build:
    commands:
      - echo Build completed on `date`
artifacts:
  files:
    - '**/*'
  discard-paths: no
  base-directory: 'build/web'

There are three phases in this Buildspec which include prebuild, build and post-build. In prebuild stage, there is the installation of the flutter, defining the path for the flutter bin, and testing and cleaning of the flutter project.

Cleaning the flutter project might come in handy if you are generating the new build folder regularly. After that, you define the path for the artefacts which we will use later on for deploying them in the S3 Bucket.

If you want to save the logs of the build stage then, you can define the path either in the Cloudwatch log or in the S3 bucket.

Deployment

Before deployment, it's better if you create the S3 bucket as we are going to use the S3 Bucket as the deployment provider.

S3 Bucket configuration

Go to the S3 bucket and click on create a bucket. You can provide the name of the bucket.
Since we are using this bucket for static hosting we can unselect the ‘Block all public access’ as it must be public.
The bucket version can be disabled as we don't need the multiple version of the same bucket
Other fields can be left as it is.😎

After creating go to the bucket you created and select the properties tab and edit static website hosting. Enable it and provide an index document which is the entry file for your project. If there is any folder structure in your folder then you can provide the redirection rules.


[
    {
        "Condition": {
            "KeyPrefixEquals": "folderOne/"
        },
        "Redirect": {
            "HostName": "mydomain.com",
            "HttpRedirectCode": "301",
            "Protocol": "https",
            "ReplaceKeyPrefixWith": "folder1/"
        }
    },

After creating the S3 bucket we are all set for the deployment stage. You can select the recently created S3 bucket under the Bucket and provide the key.