Firebase deployed to wrong hosting when multiple projects used

Question

I have two firebase projects: myapp for prod, and myapp-dev for dev environment.
I first used the firebase cli to init my project with "myapp" and so all the files were generated with this, including the hosting resource myapp (so I can deploy my app to myapp.web.app).

Then I have added a second firebase project ("myapp-dev"). I run those

firebase use --add myapp-dev  # I have selected the right myapp-dev firebase project and set `dev` as short name
firebase target:apply hosting myapp-dev myapp  # note here that I also use name "myapp" as resource

I have manually changed my .firebasesrc because I want the dev project to be default...

So my .firebasesrc looks like this

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

and firebase.json

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

Now when I ran those lines, the webapp got deployed to the prod env, the functions to the dev env...

firebase use myapp-dev
firebase deploy

EDIT

Running firebase target:apply hosting myapp myapp-dev helped !

Answer 1

In my case I had the same app deploying to 2 different environments (development and production). The documentation is not very clear on this scenario, took some playing around to get the right config.

.firebaserc

{
  "projects": {
    "production": "myapp-prod",
    "development": "myapp-dev"
  },
  "targets": {
    "myapp-prod": {
      "hosting": {
        "myapp": [
          "site-name-prod"
        ]
      }
    },
    "myapp-dev": {
      "hosting": {
        "myapp": [
          "site-name-dev"
        ]
      }
    }
  }
}

firebase.json

{
  "hosting": [{
    "target": "myapp",
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    } ]
  }]
}

To deploy to production run

firebase use production
firebase deploy

To deploy to development

firebase use development
firebase deploy

When you run firebase deploy in the project, it uses the target specified in the hosting section on the firebase.json to deploy to the site name specified in the hosting section of the target in the .firebaserc