Basic Dynamic Page with Firebase

Question

I am new to this so please show some mercy. I am trying hard.

I have a deployed Firebase website. User type: domain.com/1

it will open the file index.html in a folder named 1. Works great.

Now I would like to share with my friend a different content from DB for the same page.

This content has an ID and it's 456`. In Firebase database I have a row matched this ID with the content.

I want to share with my friend domain.com/1 + the ID 456 on a URL, so when he loaded the page he will get content matched 456. (taken from DB)

How should this URL path look to include folder 1, and id 456 ? is there only one way?
How the architecture will look like? user load this page's html ( no content) with this parameter 456, JS on client side go back to Firebase to get content and load into the page? (I have done this, which works (using functions) but very slow.)
Can the user ask something like domain.com/1?456 and redirect to a function on Firebase that will already fetch the data (456) and return a page *with the data included *? (one call to the server) if so HOW?

How it's done ? 2 or 3?

Renaud Tarnec · Accepted Answer · 2019-04-07T15:16:40.220

2

There are different ways to implement your requirement... One of the "classical" architectures is to have a fixed page (index.html in your case), that queries the Firebase Realtime Database when it is opened.

One way to pass the value of the database node you want to query is to use URL Query String as follows: domain.com/1?id=456 (See How can I get query string values in JavaScript?)

The following HTML code will do the trick:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://www.gstatic.com/firebasejs/5.9.3/firebase.js"></script>

    <script>
      // Initialize Firebase
      var config = {
        apiKey: 'xxxxxxx',
        authDomain: 'xxxxxxx',
        databaseURL: 'xxxxxxx',
        projectId: 'xxxxxxx'
      };
      firebase.initializeApp(config);

      var rootRef = firebase
        .database()
        .ref()
        .child('data');

      var urlParams = new URLSearchParams(window.location.search);
      var dbNodeID = urlParams.get('id');

      rootRef
        .child(dbNodeID)
        .once('value')
        .then(function(snapshot) {
          var dataItem1 = snapshot.val().dataItem1;
          document.getElementById('content').innerHTML = dataItem1;
        });
    </script>
  </head>

  <body>
    <div id="content"></div>
  </body>
</html>

with a Database model as follows:

DBRoot
   - data
     - 456
       - dataItem1: "value-of-456"
     - 789
       - dataItem1: "value-of-789"

This can be improved in many ways, but it is too broad for one SO question & answer! Just an example: since the database query is asynchronous, it may take time to display the value(s) in the web page. You could, by default, display a spinner and hide it when you get the result of the query (i.e. in the then() method). Other example of improvement would be to use libraries or frameworks, like JQuery or, better, Vue.js, Angular or React.

edited Apr 07 '19 at 15:16

answered Apr 07 '19 at 10:14

Renaud Tarnec

79,263
10
95
121

Thank you ! So that was what I did, but it seems to me a little bit stupid that one can’t ask the url from server which will return the html already loaded with data. How is that this way is not the only way in 2019? (One server call not 2). The other thing, can I make the URL more clean by letting user ask something like domain.com/1/345, and then a function will return back the url as you show(1?id=345) so that the shared link will be cleaner? – Curnelious Apr 08 '19 at 12:23
1

Well your first point is about the advantages and drawbacks of what is called Single Page Applications (SPA), and in particular versus "three tiers" apps which send back HTML pages that contain the markup and the data. You will find a lot of "literature" on the web, see for example https://medium.com/@goldybenedict/single-page-applications-vs-multiple-page-applications-do-you-really-need-an-spa-cf60825232a3. – Renaud Tarnec Apr 08 '19 at 12:34
1

What is sure is that with Firebase you will not be able to do the second approach (or maybe by "tweaking" the system with some Cloud Functions but that would be crazy! :)). A lot of famous sites are following the SPA model, e.g Gmail (only data is sent back and forth). – Renaud Tarnec Apr 08 '19 at 12:34
1

You could very well have an url like `domain.com/1/345`, parse it (see https://stackoverflow.com/questions/736513/how-do-i-parse-a-url-into-hostname-and-path-in-javascript) and then extract the latst part. – Renaud Tarnec Apr 08 '19 at 12:36
Thank you , you helped a lot. I couldn’t find the right term for these 2 approaches. Regarding the clean url, when I try to access to domain.com/1/345 he will look into html file called 345 inside folder1, will not find and return error. If I write a server function that is being redirected to, and extract 345 it will not work also( he still insist to search for file 345) – Curnelious Apr 08 '19 at 12:43
For domain.com/1/345 you are right, I didn't realized it will generate this problem. This is something that can be very easily done with modern JavaScript frameworks, like Vue.js by using a router (see https://router.vuejs.org/). However, mastering this kind of framework takes time... – Renaud Tarnec Apr 08 '19 at 12:46
There are easier solutions: for example http://sammyjs.org/ is a router framework that is quite simple. It goes very well with https://knockoutjs.com/ another framework that brings a lot of advantages and is much easier to learn than the usual suspects (Vue.js, Angular or React) but offers a smaller functional scope. – Renaud Tarnec Apr 08 '19 at 12:51

Basic Dynamic Page with Firebase

1 Answers1