Dynamic Firebase Values configuration - React PWA

Question

I'm working with React PWA that has multiple environment configurations. While building the app, I'm using multiple .env files to pass different Firebase configuration values. I just need to access firebase cloud messaging to show notifications to users.

So I have added my firebase values inside: .env.sit, .env.development, .env.performance, .env.production

The challenge is I have placed the firebase-messaging-sw.js file inside public folder. So I'm not able to access the environmental variables.

Additionally, If I try to place it inside the src folder as well, the change is not reflected during deployments. I just need some references to keep the firebase-messaging-sw.js file inside the src folder and make the values dynamic based on the environment switch am doing. I spent all my time but didn't find any solution. Please someone suggest some solution.

Here is my code as follows,

Inside public/firebase-messaging-sw.js

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

firebase.initializeApp({
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXX-XXXX-XXXX.firebaseapp.com",
  databaseURL: "https://XXXX-XXXX-XXXX.firebaseio.com",
  projectId: "XXXX-XXXX-XXXX",
  storageBucket: "XXXX-XXXX-XXXX.appspot.com",
  messagingSenderId: "123456789012",
  appId: "1:123456789012:web:123mko23lkm1lkm23l1233kml",
  measurementId: "G-XXXXXXXXXXX",
})

const messaging = firebase.messaging()

messaging.setBackgroundMessageHandler(function (payload) {
  const notificationTitle = payload.data.title
  const notificationOptions = {
    body: payload.data.body,
    icon: "./assets/manifest/x48.png",
  }
  return self.registration.showNotification(
    notificationTitle,
    notificationOptions,
  )
})

self.addEventListener("notificationclick", event => {
  return event
})

Am expecting it as follows, Inside src/firebase-messaging-sw.js. The code will be like this as follows,

import firebase from "firebase"
import "firebase/messaging"

const {
  REACT_APP_FIREBASE_VAPID_KEY,
  REACT_APP_FIREBASE_API_KEY,
  REACT_APP_FIREBASE_AUTH_DOMAIN,
  REACT_APP_FIREBASE_DATABASE_URL,
  REACT_APP_FIREBASE_PROJECT_ID,
  REACT_APP_FIREBASE_STORAGE_BUCKET,
  REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  REACT_APP_FIREBASE_APP_ID,
  REACT_APP_FIREBASE_MEASUREMENT_ID,
} = process.env

export const firebaseConfig = {
  apiKey: REACT_APP_FIREBASE_API_KEY,
  authDomain: REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: REACT_APP_FIREBASE_DATABASE_URL,
  projectId: REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: REACT_APP_FIREBASE_APP_ID,
  measurementId: REACT_APP_FIREBASE_MEASUREMENT_ID,
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
} else firebase.app()

export const messaging = firebase.messaging.isSupported()
  ? firebase.messaging()
  : null

score 0 · Answer 1 · answered Jun 28 '22 at 07:52

I found the solution Finally from here https://stackoverflow.com/a/55173388/19418424

Created a Firebase config file root level as src/fierbase-config.js

require("dotenv").config()
const fs = require("fs")

fs.writeFileSync(
  "../public/fb-config.js",
  `const process = {
  env: {
    REACT_APP_FIREBASE_VAPID_KEY: process.ev.REACT_APP_FIREBASE_VAPID_KEY,
    REACT_APP_FIREBASE_API_KEY: process.ev.REACT_APP_FIREBASE_API_KEY,
    REACT_APP_FIREBASE_AUTH_DOMAIN: process.ev.REACT_APP_FIREBASE_AUTH_DOMAIN,
    REACT_APP_FIREBASE_DATABASE_URL: process.ev.REACT_APP_FIREBASE_DATABASE_URL,
    REACT_APP_FIREBASE_PROJECT_ID: process.ev.REACT_APP_FIREBASE_PROJECT_ID,
    REACT_APP_FIREBASE_STORAGE_BUCKET: process.ev.REACT_APP_FIREBASE_STORAGE_BUCKET,
    REACT_APP_FIREBASE_MESSAGING_SENDER_ID: process.ev.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    REACT_APP_FIREBASE_APP_ID: process.ev.REACT_APP_FIREBASE_APP_ID,
    REACT_APP_FIREBASE_MEASUREMENT_ID: process.ev.REACT_APP_FIREBASE_MEASUREMENT_ID,
  }
}`,
)

Changed script in package.json file like this

 "start": "react-scripts start && node src/firebase-config.js",

Imported the script file inside public/firebase-messaging-sw.js file like this,

importScripts("fb-config.js")
importScripts("https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js")
importScripts("https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js")

console.log(process.env)

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,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
})

const messaging = firebase.messaging()

messaging.setBackgroundMessageHandler(function (payload) {
  const notificationTitle = payload.data.title
  const notificationOptions = {
    body: payload.data.body,
    icon: "./assets/manifest/x48.png",
  }
  return self.registration.showNotification(
    notificationTitle,
    notificationOptions,
  )
})

self.addEventListener("notificationclick", event => {
  return event
})

Dynamic Firebase Values configuration - React PWA

1 Answers1