How to do multiple hosting in firebase under same project

Web designers and companies are always looking for ways to optimize their operations and online presence in the current digital era. For developers all across the world, Google's robust Firebase mobile and web application development platform has changed the game. Firebase provides a complete solution to design, launch, and grow apps effortlessly with its wide array of services and functionalities.

The capacity of Firebase to host numerous websites under a single project is one of its most impressive features. This feature not only makes the development and deployment process simpler, but it also gives developers the freedom to effectively manage various web properties. Firebase's multiple hosting capability is a helpful tool that can assist anyone who manages different brands or works as a freelancer on numerous client projects.

Let's understand the same with an example:

Assuming that you already have 1 hosted site.
If not then refer to this: Step by Step guide for Firebase Hosting

1. First visit Firebase and open project example: multi-project
2. click hosting on the right panel.
3. then click on Add another site in the advanced section at the bottom of the page, then
name the site, for example second-site
4. Initialize Firebase in VScode (how to initialize ? Check this: Step by Step guide for Firebase Hosting)
5. Choose your project for hosting in vs code when initializing: multi-project
This will create Firebase files :
a.) firebaserc
b.) firebase.json
c.) Public folder with index.html

Config needs to make before deploying :
firebaserc:

{ "projects":
     {
       "default": "multi-project"
     }
}

The above file will be created. Set targets hosting here like this :

{
"projects":
         {
           "default": "multi-project"
         },

"targets":
         { 
           "multi-project":
                         {
                           "hosting": {
                                        "second-site": ["second-site"]
                                      }
                         }
          }
}

After this, in firebase.json add
 

"target":"second-site"
"public":"dist/second-site"

Note: dist/second-site can be found from the output path mentioned in
angular.json or config of any framework you are using.

This compiles all files in dist/second-site, that's why we used this folder as public
in firebase.json.

After this build the application once,

After build : 
The command for deploying:
firebase deploy --only hosting:second-site

That's it, open the Firebase console and check your second site hosted there. 
Happy hosting :)