I’ve added multiple websites to a single Firebase project in the past using Firebase Hosting, but every time I do, I forget the exact steps. Without further ado, here’s how to add a new website to an existing Firebase project.
First, add a new website to your Firebase project. This can be done in the Firebase console under Hosting > Dashboard. Click the “Add another site” button and follow the prompts. The ID you type into the text box will be used in the next section.
Create a new deploy target for your website:
firebase target:apply hosting <target-name> <resource-identifier>
target-name
can be anything you’d like. The resource-identifier
is the ID of the Firebase Hosting site you’d like to deploy to. You can find this in the Firebase console under Hosting > Dashboard.
For example, to create a new target for my truck-safe-501 website, the command would look like this:
firebase target:apply hosting public truck-safe-501
Running this command will update the .firebaserc
file at the root of your project with the new target:
{
"projects": {
"default": "truck-safe-501",
"public": "truck-safe-501"
},
"targets": {
"truck-safe-501": {
"hosting": {
"public": [ // Target name
"truck-safe-501"
]
}
}
}
}
For some reason, the above command doesn’t seem to update firebase.json
at the root of your project. To do it manually, add a new hosting
entry with the name of your new target:
{
"hosting": [
{
"target": "<target-name>",
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
Now that we have a new target, we can deploy to it:
firebase deploy --only hosting:<target-name>