Firebase deployed to wrong hosting when multiple projects used - firebase

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

Answer 2

I think your config should be something like this.
file .firebasesrc
"targets": {
"myapp-dev": {
"hosting": {
"myapp-dev": [
"myapp-dev"
],
"myapp": [
"myapp"
]
}
}
}
file firebase.json:
"hosting": [
{
"target": "myapp-dev",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "myapp",
"public": "dist/myapp", /* folder */
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
and then deploy using target documentation