If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

Load Firebase SDKs from reserved URLs

Firebase Hosting reserves URLs in your site beginning with /__. This reserved namespace makes it easier to use other Firebase products together with Firebase Hosting.

These reserved URLs are available both when you deploy to Firebase (firebase deploy) or when you run your app on a local server (firebase serve).

Add scripts for reserved URLs

Because Firebase Hosting is served over HTTP/2 when deployed, you can boost performance by loading files from the same origin. Firebase Hosting serves version 8 of the Firebase JavaScript SDK from special URLs formatted like so:

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

We strongly recommend loading only the libraries that you use in your app. For example, to include only Authentication and Cloud Firestore, add the following scripts to the bottom of your <body> tag, but before you use any Firebase services:

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/8.10.1/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.10.1/firebase-auth.js"></script>
  <script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
</body>

SDK auto-configuration

Automatic SDK configuration makes it easy to manage multiple environments (such as dev, staging, and production) from a single codebase. By relying on the reserved Hosting URL, you can deploy the same code to multiple Firebase projects.

In addition to hosting the SDKs themselves, the reserved namespace also provides all of the configuration necessary to initialize the SDK for the Firebase project associated with the Hosting site. This Firebase configuration and SDK initialization is provided by a script that you can include directly:

<!-- Load the Firebase SDKs before loading this file -->
<script src="/__/firebase/init.js"></script>

When you deploy to Firebase or test your app locally, this script automatically configures the Firebase JavaScript SDK for the active Firebase project and initializes the SDK.

If you prefer to control initialization yourself, the Firebase configuration values are also available in JSON form:

fetch('/__/firebase/init.json').then(async response => {
  firebase.initializeApp(await response.json());
});

Available Firebase JS SDKs (from reserved Hosting URLs)

Firebase product	Library reference (reserved URL)
Firebase core (required)	<script src="/__/firebase/8.10.1/firebase-app.js"></script>
Analytics	<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>
App Check	<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>
Authentication	<script src="/__/firebase/8.10.1/firebase-auth.js"></script>
Cloud Firestore	<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK	<script src="/__/firebase/8.10.1/firebase-functions.js"></script>
Firebase installations	<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Cloud Messaging	<script src="/__/firebase/8.10.1/firebase-messaging.js"></script> For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.
Cloud Storage	<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Performance Monitoring (beta* release)*	<script src="/__/firebase/8.10.1/firebase-performance.js"></script>
Realtime Database	<script src="/__/firebase/8.10.1/firebase-database.js"></script>
Remote Config (beta* release)*	<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script> For an optimal experience using Remote Config, also add the Firebase SDK for Analytics.
Firebase JavaScript SDK (entire SDK)	<script src="/__/firebase/8.10.1/firebase.js"></script>

Auth helpers

Firebase Authentication uses the reserved namespace to provide special JavaScript and HTML to complete authentication with providers via OAuth. This allows each Firebase project to have a unique Firebase subdomain, increasing the security of Firebase Authentication.

In addition, this allows you to use your own custom domain for the authDomain option of firebase.initializeApp(). If you configure a custom domain for Firebase Hosting, then you can also specify that custom domain (instead of your web.app or firebaseapp.com subdomain) when initializing the Firebase SDKs. See Best practices for using signInWithRedirect for more details on using a custom domain.

Reserved URLs and service workers

If you are building a Progressive Web App (PWA), you might create a service worker that has a "navigation fallback" and renders a specific URL by default if it doesn't match a list of precached items.

If you're using the sw-precache library, you can add a navigation fallback whitelist setting that excludes the reserved namespace:

{
  navigateFallbackWhitelist: [/^(?!\/__).*/]
}

In general, just remember that the double-underscore namespace is reserved for Firebase usage and that you should not intercept these requests in your service worker.