Here we are going to take advantage of GitHub pages and GitHub actions to deploy a web version of a flutter application for free. If you have not installed Flutter yet, follow the instructions in their web.
First of all we need to create a new flutter project:
flutter create flutter_to_ghpages_example
Onces the project is created:
cd flutter_to_ghpages_example/
flutter run -d chrome
With those commands we are going to run the example application on chrome (if you want to run it in a different
browser you could execute: flutter devices to list all the available devices and choose one).
Now that we checked that everything works great on our computer is time for checking the source to git.
git init
git add .
git commit -m "Initial Commit"
git branch -M main
git remote add origin git@github.com:[UserName]/[RepositoryName].git
git push -u origin main
Our initial code should be in our GitHub repository.
Before creating our workflow we need to create an empty branch named gh-pages:
git switch --orphan gh-pages
git commit --allow-empty -m "Initial commit on orphan branch"
git push origin gh-pages
With this branch pushed, and action will trigger to deploy our webpage:
But as we don't have any code, the web will have an error:
Lets deploy our initial web, for this we create a workflow that each time we push changes to main it
will update one branch called gh-pages with the web build on it:
.github/workflows/CD-to-gh-pages.yml
name: CD to GitHub Pages
on:
push:
branches:
- main
jobs:
cd:
runs-on: ubuntu-20.04
env:
JAVA_VERSION: "11.0"
FLUTTER_VERSION: "2.10.4"
steps:
- uses: actions/checkout@v2
- uses: actions/setup-java@v1
with:
java-version: ${{env.JAVA_VERSION}}
- uses: subosito/flutter-action@v2
with:
flutter-version: ${{env.FLUTTER_VERSION}}
- run: flutter pub get
- run: flutter analyze
- run: flutter test
# Build the project on release web mode, also change the base-href to the repository name
# because when you create a github page this is included on the url.
- run: flutter build web --release --base-href="/${{ github.event.repository.name }}/"
- run: |
git config --global user.name '${{github.event.pusher.name}}'
git config --global user.email '${{github.event.pusher.email}}'
git add -f build/web
git commit -m '[automated commit] releasing new web version.'
git push origin `git subtree split --prefix build/web main`:gh-pages --force
This workflow will:
- Checkout the
mainbranch. - Install Java
11.0. - Install Flutter
2.10.4 - Get the dependencies, analyze and test the code.
- Build the project on release web mode. It is important to change the
base-hrefbecause the default value is/and on GitHub pages, the base URL is your repository name. - Configure git with the credential of the person who made the push to
main. - Even though
buildfolder is excluded on.gitignorewe need to addbuild/webso we force it. - A commit is created with the content on
build/web. - We are only interested on the content of
build/webfolder, so we create a subtree and push it togh-pagesbranch.
After committing and pushing this changes to Github, a new Action run should be triggered:
When the execution of the workflow finishes, a new GitHub Pages deployment action will be running.
Now our code should be shown on the web:
Apparently everything is working properly, but lets demonstrate making a small change to the web.
Lets change the title on lib/main.dart line 27:
Add the changes, commit and push to main.
All the code is available on this repository.
