In this blog post, we will learn how to automate it so that whenever we will commit the latest version of our flutter web app will be deployed to Github Pages For Free by using Github Actions.
What is Github Actions?
Github actions help us to automate our workflow be it building apk, running test, hosting our app to Github, hosting a flutter web app to firebase hosting so that we can build test and deploy right from GitHub.
Get Started with Github Action For Flutter.
First lets integrate Github Action to our Github Repo.
when we integrate github action all the workflows and build will be visible here.
we have to create a custom workflow to auto-deploy of flutter app to GitHub pages, so just follow step by step
1.Creating workflow file
first go inside your main project directory and create a folder .github this will contain all the workflow.
Now create a workflow file let’s name it deploy.yml (you can name it whatever you want), workflow file has multiple keys we will discuss each one by one.
on:
Github action is executed following the events under on key. In this example we want to run it only when we push to master branch, you can add any of your preferred branches
name: Build, Release app to Github Pages and Firebase Hosting
on:
push:
branches:
- masterjob:
A workflow run is made up of one or more jobs that can run sequentially or in parallel.
runs-on:
runs-on define the virtual machine to run the job on, for our case we need ubuntu-latest.
Each ubuntu host machine contains different set of softwares and tools you can check them here.
jobs:
# This workflow contains a single job called "build"
build:
runs-on: ubuntu-lateststeps:
sequence of tasks a job contain are called steps. These steps can be granular like one line command or a multiline with sequence of task pack together.
let’s go through the steps to meet our requirements.
- Setup Flutter environment for Github Actions for which we will use subosito/flutter-action
steps:
- uses: actions/checkout@v1
- uses: actions/setup-java@v1
with:
java-version: '12.x'
- uses: subosito/flutter-action@v1
with:
channel: 'dev'we are using dev channel.
- Now let’s get flutter dependencies
- name: 'Run flutter pub get'
run: flutter pub get- Let’s configure flutter web or you can say enable flutter web
- name: Enable flutter web
run: flutter config --enable-web- now build web
- name: 'Build Web App'
run: flutter build web- deploy to Firebase hosting as well as github pages
for this we will need two Tokens you can call then secret keys, first is “Personal access tokens” second is “Firebase Token”
To get Personal access token your git profile >settings> Developer settings> Personal Access Token> Generate new token > select only ‘repo’ scope and give a good name that’s it.
copy the key and go to Project > Settings > Secrets > New Secret > Enter “TOKEN” for (YOUR_SECRET_NAME) and value will be key.
For getting Firebase Token run this command in the terminal in the project directory
$ firebase login:cithen it will open a browser window to login select the gmail account by which you have firebase account which contains this hosting.
once done it will show your key
copy the key and go to Project > Settings > Secrets > New Secret > Enter “FIREBASE_TOKEN” for (YOUR_SECRET_NAME) and value will be key.
- name: deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.TOKEN }}
publish_dir: ./build/web
- name: Deploy to Firebase Hosting
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}here is the full code
If you have any question feedback you can let me know in the comments below.
More Article You May Like :
Build More Apps:
