Search code examples
fluttergithubgithub-actionsworkflowcicd

Github Actions: environment String is not fetched


  1. I create PROD environment in Github.

enter image description here

  1. I add Environment secrets as below.

enter image description here

  1. I will fetch these keys with String.fromEnvironment.
class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    const supabaseUrl =
        String.fromEnvironment('envkey_SUPABASE_URL', defaultValue: "check1");
    const supabaseAnonKey = String.fromEnvironment('envkey_SUPABASE_ANONKEY',
        defaultValue: "check2");
    return const Scaffold(
      body: Row(
        children: [
          Column(
            children: [
              Text("check"),
              Text(supabaseUrl),
              Text(supabaseAnonKey),
            ],
          ),
        ],
      ),
    );
  }
}

  1. I deploy flutter web with Github Actions in .github/workflows/workflow.yml.

I create environment file with SpicyPizza/[email protected].

name: gh-pages

on:
  push:
    branches: [main]
jobs:

  PROD:
      runs-on: ubuntu-latest
      environment: PROD
      steps:
        - uses: actions/checkout@v2
        - name: Create environment file
          uses: SpicyPizza/[email protected]
          with:
            envkey_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
            envkey_SUPABASE_ANONKEY: ${{ secrets.SUPABASE_ANONKEY }}
        - uses: subosito/flutter-action@v1
        - uses: bluefireteam/flutter-gh-pages@v7
          with:
            baseHref: /injicare-event/

Build is done successfully.

However, deployed site shows default value from String.fromEnvironment, which means i can't fetch keys from environment.

enter image description here

I've also added Repository secrets either as below..

enter image description here

I've struggled with this problem for more 2 months.

I've done all as all searched document say, but nothing works..

Please help me..!!!! T_T


Solution

  • Try to cat you .env file to make sure it looks like what you expect:

    ...
              with:
                envkey_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
                envkey_SUPABASE_ANONKEY: ${{ secrets.SUPABASE_ANONKEY }}
            - name: Display .env
              run: cat .env
            - uses: subosito/flutter-action@v1
    ...
    

    Verify your code and read your custom action documentation.

    When you pass envkey_MY_VAR, the action will set MY_VAR=value in your env file (doc).

    So that code:

    String.fromEnvironment('envkey_SUPABASE_URL', defaultValue: "check1");
    

    should be:

    String.fromEnvironment('SUPABASE_URL', defaultValue: "check1");
    

    Finally, do you need env files?

    Env files are "just" a way to manage environment variables and make your life easier in some cases (local dev, for example). But they are "just" a level of indirection around regular environment variables.

    In this workflow, you probably want to use actual environment variables. In Github Actions, simpler is usually better; you might save time by using simpler actions and native GitHub tooling like actions/upload-pages-artifact and actions/deploy-pages.

    on:
      push:
        branches: [main]
    jobs:
      build:
        runs-on: ubuntu-latest
        environment: PROD
        steps:
          - uses: actions/checkout@v2
          - name: Setup Flutter
            uses: subosito/flutter-action@v1
          - name: Build Flutter Web
            run: |
              flutter config --enable-web
              flutter build web --release --base-href /injicare-event/
            env:
              SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
              SUPABASE_ANONKEY: ${{ secrets.SUPABASE_ANONKEY }}
          - name: Upload Artifacts
            uses: actions/upload-pages-artifact@v3
            with:
              path: build/web/
      deploy:
        needs: build
        permissions:
          pages: write      # to deploy to Pages
          id-token: write   # to verify the deployment originates from an appropriate source
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v4
    

    Note that the build part is straightforward; you could run it on your machine. The part that deals with deploying pages is a well-known and documented Github action.