Is there a way to use secrets in flutter web deployments on Netlify with or without using GitHub workflows?

Issue

I have a Flutter web app and I’m not much familiar with GitHub workflows. I have a dotenv file that stores a token needed by another file in the project.

For the deployments, I’m using this build command in Netlify:
if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release

One more reason why I chose to use this instead of a GitHub workflow is because this doesn’t add the build directory in my repo itself.

Now a need has arised to use this dotenv in my project. But to build and deploy this using the aforementioned command, the dotenv should always be version controlled. Otherwise Netlify won’t be able to detect it.

I have come across this stackoverflow post but this doesn’t seem to solve my problem.

Is there any way I can directly pass the environment secrets to Netlify needed for build and deploy for Flutter? Or is there any workflow to directly deploy (on push) to Netlify, without storing the build files in my repo?

This is my current netlify build settings:

image

Solution

You can simply put your build files onto another branch using GitHub workflows.

First create a empty branch named build and initiate the branch using an empty commit. Follow these steps:

  1. git checkout --orphan build
  2. git rm -rf . This removes existing files
  3. git commit --allow-empty -m "some message"

Now come back to the master branch. And run these steps:

  1. base64 path/to/dontenv and copy the output of this command. This actually decodes the contents of your DOTENV into a string.
  2. Paste this output in a new GitHub repo project secret and name it DOTENV.
  3. Now simply add this DOTENV in .gitignore.
  4. Create a new GitHub workflow.
  5. Run mkdir -p .github/workflows.
  6. nano .github/workflows/build.yml and paste this:
name: Build and Deploy

on:
 push:
   branches:
     - master

jobs:
 build:
   runs-on: ubuntu-latest

   steps:
     - name: Checkout repository
       uses: actions/checkout@v2
     
     #I am assuming your dontenv was in lib/
     #This now decodes your dotenv back and writes the contents into lib/dotenv
     - run: echo "${DOTENV// /}" | base64 -d > lib/dotenv
       env:
         MAIN: ${{ secrets.DOTENV }}

     - name: Set up Flutter
       uses: subosito/flutter-action@v1
       with:
         channel: 'stable'

     - name: Get dependencies
       run: flutter pub get

     - name: Run analyze
       run: flutter analyze .

     - name: Build release
       run: flutter build web --release

     - name: Upload artifacts
       uses: actions/upload-artifact@v1
       with:
         name: build
         path: build

 deploy-build:
   needs: build

   runs-on: ubuntu-latest

   steps:
     - name: Clone the repoitory
       uses: actions/checkout@v2
       with:
         ref: build

     - name: Configure git
       run: |
         git config --global user.email ${GITHUB_ACTOR}@gmail.com
         git config --global user.name ${GITHUB_ACTOR}

     - name: Download website build
       uses: actions/download-artifact@v1
       with:
         name: build
         path: build

     - name: Commit and Push
       run: |
         if [ $(git status --porcelain=v1 2>/dev/null | wc -l) != "0" ] ; then
           git add -f build
           git commit -m "gh-actions deployed a new build"
           git push --force https://github.com/${GITHUB_REPOSITORY}.git HEAD:build
         fi

This will create the build files in the build branch. And your master branch will remain unaffected. After every push, this GitHub action will get triggered and build and commit your build files in the build branch. To deploy, simply deploy this build branch.

Answered By – R Das

Answer Checked By – Timothy Miller (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *