What benefit does linking Firebase web app to Firebase Hosting site brings? - firebase

Question

What for should I link the web app to the Firebase Hosting site in the console? What are the benefits and effects?
The difference between the two is covered here: Whats the difference between firebase web app and firebase hosting.
The linking is mentioned in the documentation https://firebase.google.com/docs/web/setup#register-app, but the rationale and consequences are not explained.

Answer 1

The Firebase support documentation says:
You may need to link your web app to your Hosting site in the Project settings if you chose not to set up Hosting when you registered your web app with your Firebase project.
If you're using Firebase Hosting for your web app, you can use the reserved Hosting URLs to add Firebase SDKs and manage your Firebase configuration for your app.
In short, if you're using those special Hosting URLs that begin with __, in particular, /__/firebase/init.json, it helps to have linked your app to Hosting so that the configuration is complete. By my recollection, the config will then have a correct FCM config in this case.

Answer 2

You can configure partial import of the Firebase JavaScript SDK and only load the Firebase products that you need. If you're using a bundler (like Browserify or webpack), you can import individual Firebase products when you need them.
Note: You can use this option even if you use Firebase Hosting, but make sure to add your Firebase config object before initializing Firebase.
Install the Firebase JavaScript SDK:
a. If you don't already have a package.json file, create one by running the following command from the root of your JavaScript project:
npm init
b. Install the firebase npm package and save it to your package.json file by running:
npm install --save firebase
To include only specific Firebase products (like Authentication and Cloud Firestore), import Firebase modules:
// Firebase App (the core Firebase SDK) is always required and must be
listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should
import firebase using namespace import
// import * as firebase from "firebase/app"
// If you enabled Analytics in your project, add the Firebase SDK for
Analytics
import "firebase/analytics";
// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";
Initialize Firebase in your app:
// TODO: Replace the following with your app's Firebase project
configuration
// For Firebase JavaScript SDK v7.20.0 and later, measurementId is an
optional field
const firebaseConfig = {
// ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);