Cover Image

Contents

Intro

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.


Add a New Website

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.

Firebase Hosting Dashboard


Create a Deploy Target

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. Firebase 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"
        ]
      }
    }
  }
}

Update firebase.json

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"
        }
      ]
    }
  ]
}

Deploy to the New Target

Now that we have a new target, we can deploy to it:

firebase deploy --only hosting:<target-name>