Build and Deploy your Flutter GitHub Code on Web using Firebase Hosting.

 You can automate Flutter Web Deployments to Firebase Hosting using GitHub. After the configuration and setup ,all you need to do is push your local code to GitHub and view your application on web using URL .

Step 1 : Install the Firebase CLI 

https://firebase.google.com/docs/hosting/quickstart#install-cli

 

Step 2 : Initialize your project 

firebase init hosting:github

 

Step 3 :  Follow the CLI prompts, and the command will automatically take care of setting up the GitHub Action

Once the configuration is complete, there will be two new files written:

• .firebaserc : Basic config for the project. It consist of your project name on firebase;
• firebase.json: Additional config. Tells Firebase about the public folder, which files/folders to ignore

 

Step 4 : To automate the deployment process, we will write YAML code to script our CI/CD workflow using GitHub Actions.

Step 5: In .github/workflows/firebase_hosting_merge.yml paste the following code

name: Deploy to Firebase Hosting on merge

'on':

  push:

    branches:

      - master

jobs:

  build_and_deploy:

    runs-on: ubuntu-latest

    steps:

      - name: 'Git Checkout'

        uses: actions/checkout@v3

      - name: 'Flutter setup'

        uses: subosito/flutter-action@v2

        with:

          channel: 'stable'

      - name: 'Run flutter pub get'

        run: flutter pub get

      - name: 'Build Web App'

        run: flutter build web --release

      - name: Deploy to Firebase

        uses: FirebaseExtended/action-hosting-deploy@v0

        with:

          repoToken: '${{ secrets.GITHUB_TOKEN }}'

          firebaseServiceAccount: '${{ secrets. Your secret key }}'

          channelId: live

          projectId: Your firebase project name

In .github/workflows/firebase_hosting_pull_request.yml paste the following code

name: Deploy to Firebase Hosting on PR

'on': pull_request

jobs:

  build_and_preview:

    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'

    runs-on: ubuntu-latest

    steps:

      - name: 'Git Checkout'

        uses: actions/checkout@v3

      - name: 'Flutter setup'

        uses: subosito/flutter-action@v2

        with:

          channel: 'stable'

      - name: 'Run flutter pub get'

        run: flutter pub get

      - name: 'Build Web App'

        run: flutter build web --release

      - name: Deploy to Firebase

        uses: FirebaseExtended/action-hosting-deploy@v0

        with:

          repoToken: '${{ secrets.GITHUB_TOKEN }}'

          firebaseServiceAccount: '${{ secrets.Your secret key }}'

          projectId: Your firebase project name

Step 6: You can customize the workflow according to your project’s needs. Finally, to see everything in action, all you need to do is commit and push your changes to the GitHub repository, and the workflow will automatically trigger and deploy the latest version of your app to Firebase Hosting. You can check the logs and details of the workflow run, even in real time, by clicking the Actions tab of your repository main page