Flutter Web, also known as the the Hummingbird project, was recently released on the beta channel of Flutter for developers to test and try the build of Flutter applications as web applications. This guide aims to help developers agilize their deployment processes in a free and reliable solution, as well as to spread the word and love of Flutter Web.
I hope this guide helps you out :)
- Github account and a repository to host the built web application files
- Travis CI account
- Flutter SDK (beta channel)
Before setting up the pipeline on Travis and creating the Flutter Web application, it is necessary to decide which branching model is to be adopted as this decision influences the pipeline design. As this example serves as a guide on how to integrate Flutter Web and Travis CI, a single branch model (Trunk Based Development) will be used.
Once the workflow is decided, we need to setup Flutter in order to be able to run and "compile" for the web. As the time that this guide is being written (2020/01/30), Flutter Web is still in its early stages and it is necessary to use the SDK provided in the beta channel. If your Flutter version is still not pointing to the beta channel, you can switch to it by running the following commands:
flutter channel beta flutter upgrade
Once on the beta channel you need to enable support for Flutter web. To do such run the following command:
flutter config --enable-web
If everything went well
flutter doctor should now also print the following message:
[✓] Chrome - develop for the web
We can now initialize our application. Just like any other Flutter project you perform such with the following command:
flutter create <name_of_my_app>
Once created, you can now run it on a Chrome browser (As the time this guide is being written, Flutter Web debug is only available on Chrome), with the typical
flutter run command (add
-d chrome if other devices such as simulators are detected by Flutter Doctor)
Thats it! You are done with the Flutter Web setup.
For Travis to detect changes in your repository, you need to first register it in the dashboard. Head over to https://travis-ci.org/ if your repository is public, or https://travis-ci.com/ if it is private.
In Travis you implement the pipeline under the YAML schema, defined on a file named
.travis.yml. For a clean setup create this file on the root of your repository.
The first lines of .travis.yml normally identify the configuration of the machine to be used to run the pipeline. As Flutter uses
Ubuntu Bionic (18.04) distribution:
os: linux distro: bionic
Before building the application, Travis needs to have Flutter setup in the machine. One of the ways this can be performed is by defining this setup as steps to be run before the build script:
before_script: - git clone https://github.com/flutter/flutter.git -b beta - export PATH=`pwd`/flutter/bin:`pwd`/flutter/bin/cache/dart-sdk/bin:$PATH - flutter config --enable-web
Now for the build of the application, declare it under
script: - flutter build web
This command creates all necessary files to represent a Flutter application as a single-page application, and stores them on
build/web folder inside of your application folder.
Travis already provides support to deploy to Github Pages, using the
deploy job, and we only need to configure it for our workflow. The essential configuration is the following:
providerin deploy job as
pages. By doing so, Travis will recognize that a deploy in Github Pages needs to be done.
skip_cleanupmust be true, or else Travis will delete all files created in the build, which prevents the deploy of the static files generated in the application build.
github_tokena personal access token with read and write permissions of the repository which will serve the Github Pages static files. Once you obtain the token, define it as an environment variable in Travis pipeline settings.
keep_historydecides to keep the history of the branch in which the files will be pushed to (if set to true, history is kept, otherwise Travis performs a force push).
local_dirthe relative path from the pipeline build workspace to the directory in which the static files to be deployed are located.
deploy: provider: pages skip_cleanup: true github_token: $GITHUB_TOKEN keep_history: true local_dir: build/web
By default Travis pushes the files to
gh-pages branch of the repository that triggered the pipeline build. You can configure the deploy to other branch or repository using the
target_branch keys. Take in consideration that if your want to modify the repository to be deployed, you need to include the username of the repository owner (
<repo_owner>/<repo_to_deploy>). Another cool feature which Travis provides is the set of the custom domain to be used on Github Pages. This is done by modifying the value of
fqdn. See all the other cool features that Travis provides here.
Thats all, trigger a push/pull request on the build branch and Travis will deploy your Flutter application! Best part? It's all free!
You can see the live version of the classic Flutter Counter here.
The write of this guide was possible and inspired by the following guides / documentation: