How to properly use env variables inside js file in web folder of flutter project

Question

I have a JS file holding my firebase config that I import into my index.html, and it works perfectly when the values within the JS file are hardcoded

<script src="./firebase-config.js"></script>
  <script type="module">
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional

    import { firebaseConfig } from './firebase-config.js';
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>

export var firebaseConfig = {
    apiKey: "<my-api-key>",
    authDomain: "<my-auth-domain>",
    databaseURL: "<my-database-url>",
    projectId: "<my-project-id>",
    storageBucket: "<my-storage-bucket>",
    messagingSenderId: "<my-messaging-sender-id>",
    appId: "<my-app-id>",
    measurementId: "<my-measurement-id>"
  };

But when I try to use env variables within the JS file like apiKey: process.env.FIREBASE_API_KEY, the key doesn't get picked up and I get an error that firebase isn't initialised when I run the project. The .env file is also placed in the web folder

score 0 · Answer 1 · answered Apr 13 '21 at 07:43

0

Usually, env var are replaced during the building process. If you dont use a bundler, you cant use env var in your app.

https://stackoverflow.com/a/61725261/3573340

answered Apr 13 '21 at 07:43

Clem

2,150
15
17

2

That's dart code, but the firebase config has to be in the index.html file for it to work – ULTIMATEGAMER07 Apr 13 '21 at 10:04
@ULTIMATEGAMER07 did you manage to get the answer ? – Guillaume Kiz Oct 02 '21 at 12:46
Like Clem said the html file itself isn't dynamic, I resorted to creating the html file dynamically during the build action using a bash script – ULTIMATEGAMER07 May 15 '22 at 12:34
@ULTIMATEGAMER07 How you have achieved this ? – ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ Mar 06 '23 at 04:46

How to properly use env variables inside js file in web folder of flutter project

1 Answers1