Utilizing .env in firebase-messaging-sw.js with react boilerplate

Author: umerqrCreated Aug 28, 2020Updated Dec 31, 2023

Description

I followed this to get where i am but, I am unable to utilize env in the firebase-messaging-sw.js since process is not available inside service worker. I tried this but i couldn't do it with react boilerplate. I asked the same question on stack as well but no solution. I cant import any files in the service worker as well. I need to get the configs through the env, directly or indirectly. I m stuck in this since a few days. Any help would be appreciated.

Steps to reproduce

importScripts(https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js) importScripts(https://www.gstatic.com/firebasejs/7.17.1/firebase-messaging.js)

firebase.initializeApp({
   apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
   authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
   databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
   projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
   storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
   messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
   appId: process.env.REACT_APP_FIREBASE_APP_ID,
})

Expected behavior importScripts(https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js) importScripts(https://www.gstatic.com/firebasejs/7.17.1/firebase-messaging.js)

firebase.initializeApp(firebaseConfig)

Versions

  • React-Boilerplate: latest
  • Node/NPM: v12.18.3
  • Browser: Chrome

Source: react-boilerplate/react-boilerplate