DEV Community

Cover image for GitHub Action for Flutter Web
HIMANSHU SHARMA
HIMANSHU SHARMA

Posted on • Updated on

GitHub Action for Flutter Web

My Workflow

This GitHub Action "Flutter Web CI" is designed to automate the developers work to:

  • Configure the flutter tool for web support
  • Build an app with web support
  • Archive the build and upload the Artifact
  • Download the Artifact
  • Display structure of build files
  • Use GitHub Pages to host your Flutter Web app

Submission Category:

Maintainer Must-Haves and DIY Deployments

Yaml File or Link to Code

name: Flutter Web CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      my_secret: ${{secrets.GH_DEPLOY}}
    steps:
    - uses: actions/checkout@v1
    - uses: subosito/flutter-action@v1
      with:
        channel: beta
    - run: flutter config --enable-web
    - run: flutter pub get
#     - run: flutter test
    - run: flutter build web
    - name: Archive Production Artifact
      uses: actions/upload-artifact@master
      with:
        name: web-build
        path: build/web
    - name: Download Artifact
      uses: actions/download-artifact@master
      with:
        name: web-build 
    - name: Display structure of build files
      run: ls -R
      working-directory: ./web
    - name: Deploy to GH Pages
      run: |
        cd build/web
        git init
        # type configurations: your user.email and user.name followed lines 
        # git config --global user.email your_email 
        # git config --global user.name your_name 
        git config --global user.email ranubhardwaj89@gmail.com
        git config --global user.name himanshusharma89
        git status
        # change this remote url for examle your remote url is https://github.com/onatcipli/flutter_web.git then the following:
        git remote add origin https://${{secrets.GH_DEPLOY}}@github.com/himanshusharma89/dev.git
        git checkout -b gh-pages
        git add --all
        git commit -m "update"
        git push origin gh-pages -f
Enter fullscreen mode Exit fullscreen mode

GitHub logo himanshusharma89 / dev

Using GitHub Actions use GitHub Pages to host your Flutter Web app. And much more.

Dev

A new Flutter project for the GitHub Actions x DEV Hackathon!

GitHub Action for Flutter Web

This GitHub Action "Flutter Web CI" is designed to automate the developers work to:

  • Configure the flutter tool for web support
  • Build an app with web support
  • Archive the build and upload the Artifact
  • Download the Artifact
  • Display structure of build files
  • Use GitHub Pages to host your Flutter Web app

Usage

name: Flutter Web CI
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      my_secret: ${{secrets.GH_DEPLOY}}
    steps:
    - uses: actions/checkout@v1
    - uses: subosito/flutter-action@v1
      with:
        channel: beta
    - run: flutter config --enable-web
    - run: flutter pub get
#     - run: flutter test
    - run: flutter build web
    - name: Archive Production Artifact
      uses: 
Enter fullscreen mode Exit fullscreen mode

Additional Resources / Info

This GitHub Action uses the following open-source GitHub Actions:

GitHub logo subosito / flutter-action

Flutter environment for use in actions. It works on Linux, Windows, and macOS.

flutter-action

This action sets up a flutter environment for use in actions. It works on Linux, Windows, and macOS.

Usage

steps:
- uses: actions/checkout@v2
- uses: actions/setup-java@v1
  with:
    java-version: '12.x'
- uses: subosito/flutter-action@v1
  with:
    flutter-version: '2.0.5'
- run: flutter pub get
- run: flutter test
Enter fullscreen mode Exit fullscreen mode

Use latest release for particular channel:

steps:
- uses: actions/checkout@v2
- uses: actions/setup-java@v1
  with:
    java-version: '12.x'
- uses: subosito/flutter-action@v1
  with:
    channel: 'stable' # or: 'beta', 'dev' or 'master'
- run: flutter pub get
- run: flutter test
- run: flutter build apk
Enter fullscreen mode Exit fullscreen mode

Use latest release for particular version and/or channel:

steps
- uses: actions/checkout@v2
- uses: actions/setup-java@v1
  with:
    java-version: '12.x'
- uses: subosito/flutter-action@v1
  with:
    flutter-version: '
Enter fullscreen mode Exit fullscreen mode

Upload-Artifact v2

This uploads artifacts from your workflow allowing you to share data between jobs and store data once a workflow is complete.

See also download-artifact.

What's new

  • Easier upload
    • Specify a wildcard pattern
    • Specify an individual file
    • Specify a directory (previously you were limited to only this option)
    • Multi path upload
      • Use a combination of individual files, wildcards or directories
      • Support for excluding certain files
  • Upload an artifact without providing a name
  • Fix for artifact uploads sometimes not working with containers
  • Proxy support out of the box
  • Port entire action to typescript from a runner plugin so it is easier to collaborate and accept contributions

Refer here for the previous version

Usage

See action.yml

Upload an Individual File

steps
- uses: actions/checkout@v2

- run: mkdir -p path/to/artifact

- run: echo hello > path/to/artifact/world.txt

- uses: actions/upload-artifact@v2
  with:
    name: my-artifact
    path: 
Enter fullscreen mode Exit fullscreen mode

Download-Artifact v2

This downloads artifacts from your build

See also upload-artifact.

What's new

  • Download all artifacts at once
  • Output parameter for the download path
  • Port entire action to typescript from a runner plugin so it is easier to collaborate and accept contributions

Refer here for the previous version

Usage

See action.yml

Download a Single Artifact

Basic (download to the current working directory):

steps:
- uses: actions/checkout@v2

- uses: actions/download-artifact@v2
  with:
    name: my-artifact
    
- name: Display structure of downloaded files
  run: ls -R
Enter fullscreen mode Exit fullscreen mode

Download to a specific directory:

steps:
- uses: actions/checkout@v2

- uses: actions/download-artifact@v2
  with:
    name: my-artifact
    path: path/to/artifact
    
- name: Display structure of downloaded files
  run: ls -R
  working-directory: path/to/artifact
Enter fullscreen mode Exit fullscreen mode

Basic tilde expansion is supported for the path input:

  - uses: actions/download-artifact@v2
    with:
      name: my-artifact
      path: ~/download/path
Enter fullscreen mode Exit fullscreen mode

Compatibility

Made with by Himanshu Sharma

Top comments (0)