Firebase: deploy same app to multiple Firebase-projects

Question

I´m trying to deploy my code to two different Firebase-projects, one for development and one for production.

The my-app-dev project was already included and working, so I added the my-app (for production) with firebase use --add and selected the my-app.

This is how my Firebase-config looks now:

.firebaserc

{
  "targets": {
    "my-app-dev": {
      "hosting": {
        "app": [
          "my-app-dev"
        ]
      }
    }
  },
  "projects": {
    "default": "my-app-dev",
    "prod": "my-app"
  }
}

firebase.json

{
  "hosting": [
    {
      "target": "app",
      "public": "dist/app",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ],
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  }
}

As long as I deploy to my default project, everything works fine, but when I try to firebase deploy -P prod it shows the following error:

Deploy target app not configured for project my-app. Configure with:

firebase target:apply hosting app <resources...>

I tried to find some more information about this command, but still don´t know what to put for resources. Overall I feel like the .firebaserc has a very confusing structure.

Answer 1

I had the same problem but in a different fashion.

The project I have is an Angular 11 project, which has 4 different environments - the same behaviour of deploying to the default project (env) was fine but as soon as I tried to deploy to a different environment (firebase project), it failed with the same error: Deploy target ___ not configured for project ___. Configure with:

I resolved this by adding to my .firebasesrc > targets:

{
  "projects": {
    "default": "default-project"
  },
  "targets": {
    "default-project": {
      "hosting": {
        "frontend": [
          "default-project"
        ]
      }
    },
    "staging-project": { // Added this entry.
      "hosting": {
        "frontend": [
          "staging-project"
        ]
      }
    } 
  }
}

Answer 2

Here is how I solved it to deploy to a production project and staging project:

In my .firebaserc file i declare the 2 projects and their sites:

{
  "targets": {
    "my-production-project": {
      "hosting": {
        "production": [
          "my-production-site-id"
        ]
      }
    },
    "my-staging-project": {
      "hosting": {
        "staging": [
          "my-staging-site-id"
        ]
      }
    }
  }
}

Then in my firebase.json I have something like that (conf might differ base on your framework, I m using nextjs here...)

{
  "hosting": [
    {
      "target": "staging",
      "source": ".",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "frameworksBackend": {
        "region": "europe-west1"
      }
    },
    {
      "target": "production",
      "source": ".",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "frameworksBackend": {
        "region": "europe-west1"
      }
    }
  ]
}

Finally I have Makefile with rules to deploy:

staging:
    @echo "Deploying to staging"
    firebase use my-staging-project
    firebase deploy --only hosting:staging

production:
    @echo "Deploying to production"
    firebase use my-production-project
    firebase deploy --only hosting:production

Note the call to firebase use my-production-project