Deploy Flutter web app with GitHub Actions or GitLab CI/CD on Pages in 5 min

Flutter is growing in its popularity from day to day, and now it is even easier to spin it off with web support. Probably the quickest way to see web in action is to deploy it on GitLab pages or GitHub pages. Lets see how to do this in 5 minutes

Create a Flutter app

flutter channel stable
flutter upgrade
flutter create flutter_web

Update base URL

This steps are common for both GitLab & Github platforms.

GitHub

Please, note that your Repository name should be the same as a base URL we updated above

GitHub — create a new project

GitHub Actions

After merging this to master GitHub automatically recognises a new action and triggers a build

GitHub Action in progress

Wait utill pipeline successfully passes

GitHub Actions pipeline

This action will create a new branch gh-pages where you can check out content of the web build

gh-pages branch with release web build content

GitHub Pages

GitHub pages

GitHub Preview

https://xajik.github.io/flutter_page/

GitLab

Same as for GitHub, make sure that Project slug is the same as the base URL in web/index.html Flutter project

GitLab — new project creation window

GitLab CI/CD

build_and_test_web_app:
stage: build
image: cirrusci/flutter:stable
before_script:
- flutter pub get
script:
- flutter build web
- flutter analyze
- flutter test
artifacts:
paths:
- build/web

pages:
stage: deploy
script:
- cp -r build/web public
artifacts:
paths:
- public
only:
- master

https://gitlab.com/-/snippets/2113393

GitLab CI/CD

GitLab CI/CD pipeline

GitLab Pages

GitLab Pages settings page