how to set multi paged website using firebase?

Question

i'm working on a basic website using html/css/js and Firebase fire-store to store data along with authentication to authenticate users, my website consists of multiple HTML pages which most of utilise Firebase services, and i'm wondering what would be the best way to allow all the pages (and the scripts within them) to utilise the Firebase?

should i copy the Firebase SDK and configuration code snippet into each and every html page? i believe this wouldn't be a good practice and i doubt it would even work well..

how can i achieve what i want? is there a certain Firebase service that allows me to achieve it?

Answer 1

Firebase comes with a JavaScript SDK for Firestore, that you can use in your scenario.

The most common way to set up such a web app is as a single-page application, so that all HTML, JavaScript and CSS is loaded into a single page without ever reloading an entirely new page. This has the big advantage that you're only loading the Firebase SDKs once.

If you have multiple HTML pages, you will have to load Firebase into each page where you use it. But on all but the first page the SDK will likely be loaded from the user's browser cache, but it'll still be a lesser experience than with a single-page application.

For a good introduction of a single-page application, I recommend taking the Cloud Firestore for web developers codelab. As a more introductory tutorial to building single-page applications with Firebase and Firestore, I'd recommend Get to know Firebase for web and its companion video.