Search code examples
firebaseblazorgithub-pageswebassembly

access firebase from client JS hosted at githubpages

I'm developing a hobby project on blazor hosted on githubpages.

I want to add a database to it, and I'm trying to use firebase storage for the thing, but all tutorials I see require npm and seem to be server-side oriented or at least only for Node or React or those.

Likewise, I found other tutorials on how to do that from ASP hosted Blazor app, on the server side. Does not fit my solution.

Is it possible to access it from the client's raw JS code or, even better, from blazor WASM client side itself?

Solution

  • You can add it to the bottom of the body tag, like so:

    <body>
  <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js'

    // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
    import { getAnalytics } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-analytics.js'

    // Add Firebase products that you want to use
    import { getAuth } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js'
    import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js'
  </script>
</body>

    Source, if you need more info: https://firebase.google.com/docs/web/alt-setup

    Also, if you need a db maybe you want Firestore or Realtime Database instead of Storage.