Does the firebase web SDK need to be in every html file i use?

Question

The firebase web sdk code is already in my index.html. If i wanted to redirect it to another html file (eg: account.html), would i need to re-paste all the firebase sdk code?

For reference, here's the default sdk code firebase tells you to paste at the start of the app:

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>

    <!-- More SDK's at https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-analytics.js"></script>

    <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "xyz",
            authDomain: "xyz.firebaseapp.com",
            databaseURL: "https://xyz.firebaseio.com",
            projectId: "xyz",
            storageBucket: "xyz.appspot.com",
            messagingSenderId: "xyz",
            appId: "xyz",
            measurementId: "G-xyz"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();
    </script>

Answer 1

The short answer is yes. You need to include the Firebase SDK in every HTML page where you want to be able to use it.

The Firebase SDKs are often used in conjunction with JavaScript libraries that enable the "Single-Page App" pattern, where navigating between different pages does not actually trigger a new page load in the browser. An oversimplified explanation is that you'd have a single index.html page that always loads no matter what URL the user visits on your site, and JavaScript would intercept link clicks etc. and change the URL appropriately as your user navigates the site. This can have performance advantages over a full page reload.

Answer 2

Alternatively you could export your firebase SDK code snippet into another seperate .js file and then include it in each of your html files. That way you don't need to repeat yourself with lines of code.

Answer 3

From my beginner's perspective, I'd just ask yourself:

"Does this page use any Firebase services?" i.e., Does it need to know details about a user (signed in, uid, etc)? Does it call a Cloud Function? Does it read or write to a Firebase database?

If yes, yes, you'll need the relevant SDKs loaded. If no, like it's just a random page of content hosted by Firebase hosting, then no, you don't need it on that page.

Examples: If you have a user logged in, probably you'd track that user all throughout your site, to provide them access to personalized content and account options, so you'd need Firebase loaded all throughout.

But, if for some reason you have an isolated page that needs to call a cloud function, but other pages that don't, then I don't see why you'd need to have Firebase on that page.

You didn't ask about Firebase hosting specifically, but since that confused me when I set it up, I'll just mention that you can host through Firebase hosting and still not load the Firebase SDKs if you're not using Firebase services on a given page.

Hope that helps!