Continuous Integration with Flutter using Gitlab

mobile.cologne Februrary 12th
https://mobile.cologne/2019-02-12-vortragsabend

Pascal (@passsy) presents how to build a Continuous Integration Pipeline for Flutter.

flutter build
flutter test
flutter analyze

He creates a sample project and builds it on gitlab CI, for Android and iOS.

Transcript

1. Continuous Integration
   

   View Slide

2. grandcentrix.net
   @grandcentrix
   We are hiring!
   +Pascal Welsch
   @passsy
   

   View Slide

3. Assumption:
   Flutter apps have a
   single codebase
   

   View Slide

4. Reality:
   Flutter apps have
   one codebase and
   n platform wrappers (with
   code)
   

   View Slide

5. Flutter app
   code
   Flutter Codebases
   iOS embedder
   Android
   embedder
   Fuchsia
   embedder
   Windows
   embedder
   

   View Slide

6. Flutter app code
   Perfect Flutter Codebase
   iOS embedder
   Android
   embedder
   Fuchsia
   embedder
   Windows
   embedder
   

   View Slide

7. Flutter app code
   Real Flutter Codebase
   iOS embedder
   Android
   embedder
   Fuchsia
   embedder
   Windows
   embedder
   Plugin
   Plugin
   Plugin
   Plugin
   Plugin
   Plugin
   Plugin
   Plugin
   Plugin
   Plugin
   Plugin
   Plugin
   

   View Slide

8. Flutter Core
   Assets
   Platform code Plugins
   Core
   Embedder
   Dart
   Code
   Your app
   Flutter Plugins
   

   View Slide

9. Embedder App
   App code
   (Dart)
   Flutter
   Core
   Assets
   Plugins
   Platform code
   Flutter SDK
   Embedder SDK
   Responsibility
   

   View Slide

10. CI steps
    - Build app
    - Run unit tests
    - Run UI tests
    - Run static analysis
    - Code coverage
    - Lint
    - Danger
    

    View Slide

11. Difficulties of CI in mobile
    development
    - Android Emulator required for Instrumentation Tests
    - iOS Simulator required for iOS UI Tests
    - iOS apps can’t be build on linux
    Jenkins, one of the few solutions offering, runners on OSX
    

    View Slide

12. Flutter CI
    - Tests (even UI tests) run headless on every OS
    - Building/Testing embedder apps requires embedder SDK
    tools
    - For iOS/Mac apps you need macOS
    - For Android you need the Android SDK
    - For Windows you need new hardware every year
    

    View Slide

13. Which CI is good for Flutter?
    - Travis CI
    - CircleCi
    - Jenkins
    - GitLab CI
    - GitHub Actions
    - you name it...
    

    View Slide

14. Which CI?
    Any CI, but I’ll focus on GitLab CI for today
    Let’s assume the following is given:
    $ echo “Let’s build”
    $ git clone git@github.com:passsy/flutter-app.git
    

    View Slide

15. $ flutter build
    $ flutter test
    $ flutter analyze
    

    View Slide

16. $ flutter build
    ❌ command not found: flutter
    

    View Slide

17. Let’s install flutter
    git clone
    git@github.com:flutter/flutter.git
    export PATH="$PATH:`pwd`/flutter/bin"
    

    View Slide

18. Let’s install flutter
    

    View Slide

19. What flutter doesn’t require
    - Dart
    - Flutter engine
    - Java
    - Android SDK *
    - Xcode toolchain *
    * Optional
    

    View Slide

20. Finally flutter is
    installed
    

    View Slide

21. The flutter update
    problem
    

    View Slide

22. Make your CI builds
    reproducible!
    Never use latest
    Let all developers and CI use the same flutter version
    Make flutter part of your project
    

    View Slide

23. Flutter wrapper
    github.com/passsy/flutter_wrapper
    - single executable flutterw which downloads the correct
    version before executing flutter
    - Version is part of your repository (submodule)
    

    View Slide

24. Live Demo
    

    View Slide

25. $ ./flutterw build
    

    View Slide

26. $ flutter build -h
    Available subcommands:
    aot Build an ahead-of-time compiled snapshot of your
    app's Dart code.
    apk Build an Android APK file from your app.
    bundle Build the Flutter assets directory from your app.
    ios Build an iOS application bundle (Mac OS X host
    only).
    

    View Slide

27. Use a bash script to
    prevent vendor lock-in
    

    View Slide

28. Build our build_android.sh
    #!/bin/bash
    set -e
    flutter build apk
    

    View Slide

29. Execute it on GitlabCI
    image: "passsy/flutterw:0.1.0"
    before_script:
    - ./flutterw doctor --verbose
    pr:
    script:
    - ./ci/build_flutter.sh
    

    View Slide

30. Execute it on Jenkins
    pipeline {
    agent { docker "cirrusci/flutter"}
    stages {
    stage(“pr”) {
    sh ‘ci/pr.sh’
    }
    }
    }
    

    View Slide

31. Docker!
    - Use Docker to build your flutter app
    - Except for iOS builds
    - Allows building it locally (gitlab-runner)
    - Works on almost every modern CI
    

    View Slide

32. Improve our build_flutter.sh
    #!/bin/bash
    set -e
    flutter format lib
    flutter analyze
    flutter test --coverage
    flutter build android
    

    View Slide

33. Improve build script
    ./flutterw test --coverage
    # parse and show code coverage (via lcov)
    genhtml -o coverage/html coverage/lcov.info
    

    View Slide

34. Improve build script
    # format with line width 120
    ./.flutter/bin/cache/dart-sdk/bin/dartfmt
    --set-exit-if-changed -w -l 120 lib test
    

    View Slide

35. Build iOS on macOS
    - Use gitlab-runner and make your MacBook a runner
    -
    

    View Slide

36. Build android
    - Create build_android.sh
    - Works in docker container
    

    View Slide

37. Create releases
    - Use existing tools of the embedder platform
    -
    -
    

    View Slide

38. Create releases (android)
    - release_android.sh
    - Use gradle plugin to publish to play store
    github.com/Triple-T/gradle-play-publisher
    - ./gradlew publishApk
    

    View Slide

39. Create releases (ios)
    - Use what Sebastian suggested in his talk
    - Fastlane
    - xcbuild is your friend
    

    View Slide

40. Codemagic
    - It works
    - Runs tests, builds apps
    - Easy way to get running for iOS without a Mac
    - I don’t trust them
    

    View Slide

41. Thanks
    

    View Slide

42. Flutter Workshop
    Hot Reload Hackathon
    Tuesday, March 12, 2019
    Cologne, grandcentrix
    https://flutter.school
    

    View Slide