DEV Community

PeterF2170
PeterF2170

Posted on

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
  },
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)