How to seperate DEV and PROD Firebase Projects in NUXT 🔥

Just as easy as deploying a NUXT SSR App using Vercel is the implementation of DEV and PROD environments for 2 different firebase Projects.

First TODO is to create seperate projects in Firebase. I named mine project-dev and project-prod.

In your nuxt.config.js, all you have to add is the following env attribute:

export default {
  env: {
    NODE_ENV: process.env.NODE_ENV
  },

In your firebase.js or .ts file, you have to create 2 seperate config variables for the 2 firebase projects.

const configDev = {
  apiKey: 'verysecret',
  authDomain: 'project-dev.firebaseapp.com',
  projectId: 'project-dev',
  storageBucket: 'project-dev.appspot.com',
  messagingSenderId: 'verysecret',
  appId: 'verysecret',
  measurementId: 'verysecret'
};

const configProd = {
  apiKey: 'verysecret',
  authDomain: 'project-prod.firebaseapp.com',
  projectId: 'project-prod',
  storageBucket: 'project-prod.appspot.com',
  messagingSenderId: 'verysecret',
  appId: 'verysecret'
};

let firebaseApp;

if (!getApps().length) {
  if (process.env.NODE_ENV === 'development') {
    firebaseApp = initializeApp(configDev);
  } else {
    firebaseApp = initializeApp(configProd);
  }
}

Thats it. As easy as it could be. Developing on localhost will now use the dev Firebase project, deploying it (for example on vercel) will automatically change the project to project-prod.

If you just added a new Firebase PROD Project, you will have to activate your features (Firestore, Auth, ...), then it should work just as the DEV project.