CODEWITHSUNDEEP
javascriptnode.jsfirebasefirebase-realtime-databasefirebase-admin
Dam
Dam

Reputation: 125

How to properly use Firebase Admin SDK using Node.js for a web-app?

First, I'm sorry for the description. This is the best I could do since I have zero knowledge in WEB development and I find it hard to find the specific thing to ask.

I finished to develop an amazing android app and now I'm using Firebase hosting to host my static web page - a simple form with a submit button.

I struggled with this all day and I'm sorry again for my stupidity in this case. So here we go :

I initialized everything I need for the Admin SDK for Node.js according to Google Developers

In addition to all the files Firebase generated for me, in WebStorm I created two files in a "public" directory: index.js and index.html.

I managed to write to the database as admin with this code:

// index.js  

const admin = require('firebase-admin');

const serviceAccount = require("C:/myapp/serviceAccountKey.json");

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: "https://myapp.firebaseio.com"
});

let db = admin.database();
let ref = db.ref("Guests");
let isInvited = false;

function updateDB() {
    ref2.once("value", function (snapshot) {
        isInvited = snapshot.val();

        if (!isInvited) {
            ref.update({
                "invited": true,
                "arrive": true,
            });
        }
    });

}

If I run this from WebStorm the database will change to the vallues I set. This is a boilerplate. I want that when a user clicks on the submit button in the html file then an update to the database will happen from the js file.

this is the code for the html file:

// index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>
   
  </head>
  <body>
   
    <form id="mainForm">
      <div>
        <label for="arrivalCheckbox">Arrival Confirmation</label>
        <input type="checkbox" id="arrivalCheckbox" value="1">
      </div>
      <div>
        <label for="joiners">Joiners</label>
        <input type="number" id="joiners" min="0" max="20">
      </div>
      <button type="submit" id="submitButton">Submit</button>
    </form>

    
     <!-- update the version number as needed -->
     <script defer src="/__/firebase/7.17.2/firebase-app.js"></script>
     <!-- include only the Firebase features as you need -->
     <script defer src="/__/firebase/7.17.2/firebase-auth.js"></script>
     <script defer src="/__/firebase/7.17.2/firebase-database.js"></script>
     <script defer src="/__/firebase/7.17.2/firebase-messaging.js"></script>
     <script defer src="/__/firebase/7.17.2/firebase-storage.js"></script>
     <!-- initialize the SDK after all desired features are loaded -->
     <script defer src="/__/firebase/init.js"></script>
     
     <script defer src="index.js"></script>

  </body>
</html>

When I try to put the writing to the database part in index.js in a function and then calling in from the html file when using "onSubmit" on the form or "onClick" on the submit button, the writing didn't happen, even if I deploying my app with "firebase deploy".

I have zero knowledge in WEB and very little time to learn.Today is my first day seeing javascript and html. I struggled with this all day and I will be very happy to get some help.

Upvotes: 1

Views: 2548

Answers (1)

Doug Stevenson
Doug Stevenson

Reputation: 317828

The Firebase Admin SDK can't be used from web frontend code. It only work for backend code running nodejs (or your desktop, which apparently worked for you). If you want to read and write data directly from your frontend, you should follow the instructions in the documentation.

Upvotes: 2

Related Questions