Flutter For Web Build Pipeline Script

Use Flutter for web with your existing cloud build tools.

Installation

The installation of this script is as lightweight as possible.

1. Place the build-web.sh script beside your pubspec.yaml file.
2. Add the following command to your pipeline.

bash ./build-web.sh

You may need to change the path called depending on your repo structure or tools.

Build Config Example with Netlify

See it in action at flutter-for-web-build-script-demo.netlify.app

Here is an example config for Netlify that would be stored in their netlify.toml file at the root directory of your repo. In a monorepo structure, you would only have to change build to point to your flutter app directory.

[build]
  # Directory to change to before starting a build.
  base = "./"

  # Directory that contains the deploy-ready HTML files and assets generated by
  # the build. This is relative to the base directory if one has been set, or the
  # root directory if a base has not been set.
  publish = "build/web"

  # Flutter build for web command
  command = "bash ./build-web.sh"

Netlify File-based configuration Docs

How It Works

The script installs the beta version of Flutter to your deploy pipeline container. If your build pipeline caches build artifacts Flutter will only be downloaded once.

Assets

Flutter for web moves your static assets listed in the app's pubspec.yaml under a new /assets/ folder. Flutter only does this during build, not development mode.

The path in your web app bundle looks now like /assets/myAssets/.... This results in your app having many 404 errors.

To make the web file structure match that of your iOS or Android app, the build script makes a copy of the new /assets folder and places them in your project's root folder, mirroring what is found in Flutter's development mode.

Cache Busting

Currently flutter doesn't offer a way to hash build artifacts. A stale version of the web app will persist in the user's web browser until they empty their cache.

To solve this, we add a hash to the end of the URL as a query parameter. This allows the cache to be busted without renaming any bundled files.

Only JS and JSON files loaded from the entry index.html file are loaded.

Checking For Updates

There may be more future changes to this script than a stable framework would require (Flutter for web is still in beta). The script checks a list of tagged releases published on the public Github repo before it runs. The file does not auto update, it just shows a warning.

Contributing

If you would like to submit a feature or find a bug, feel free to raise an issue or submit a pull request with your code contribution.