Automatically Create New Pages in Firebase Hosting on user events(JAVASCRIPT)

Question

I'm creating a blog Website project using Firebase.

What I want is - Create an entirely new Page for the Blog Posts once a USER creates it.

FOR EXAMPLE -

If a user submits a post with the title: "Best Watches in 2019".
then it should create a new page like: "blog.com/best-watches-in-2019.html"

I searched the web a lot about this, but I'm still a beginner in Firebase. Please help me with a solution guys, or a workaround if it's not directly possible.

Does it need to be an HTML page? Couldn't it be a record in a database, e.g. Firestore, that can be fetched by a specific page when opened, e.g. `blog.com/page?contentId=AZERTYUIOP` (`AZERTYUIOP` being the id of the database record/Firebase doc). — Renaud Tarnec, Apr 10 '20 at 13:18

score 1 · Accepted Answer · answered Apr 12 '20 at 11:01

The following HTML page shows how you can query the Firestore database when the HTML page is opened, based on a value passed as a query string parameter.

So, you should do as follows:

Create a collection named blogPosts in your Firestore database
Add a document with, for example, the id best-watches-in-2019 and a field named field1 where you enter any string value
Copy the HTML code below and create an HTML page that you save on your computer.
Open the page in your brower and add best-watches-in-2019 as query string parameter as folllows: http://yourdirectory/yourpagename.html?contentId=best-watches-in-2019.

<html>
  <head>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
      crossorigin="anonymous"
    ></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-firestore.js"></script>
  </head>

  <body>
    <span id="field1"></span>

    <script>
      var config = {
        apiKey: 'xxxx',
        authDomain: 'xxxx',
        projectId: 'xxxx'
      };
      firebase.initializeApp(config);

      $.extend({
        getUrlVars: function () {
          var vars = [],
            hash;
          var hashes = window.location.href
            .slice(window.location.href.indexOf('?') + 1)
            .split('&');
          for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
          }
          return vars;
        },
        getUrlVar: function (name) {
          return $.getUrlVars()[name];
        },
      });

      $(document).ready(function () {
        var documentID = $.getUrlVar('contentId');

        firebase
          .firestore()
          .collection('blogPosts')
          .doc(documentID)
          .get()
          .then(function (doc) {
            if (doc.exists) {
              $('#field1').text(doc.data().field1);
            } else {
              // doc.data() will be undefined in this case
              console.log('No such document!');
            }
          })
          .catch(function (error) {
            console.log('Error getting document:', error);
          });
      });
    </script>
  </body>
</html>

Thanks a lot for this, buddy! The problem is, I don't know how to work with jQuery. I'm still a beginner developer. I know it's a long code, and I understand that it must have took you a long time to write this for me. Can you please help me with the JavaScript version of this. I'll be really grateful. — Raghav, Apr 12 '20 at 11:30
You should adapt it by applying the techniques detailed in https://stackoverflow.com/questions/8177215/change-span-text and https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — Renaud Tarnec, Apr 12 '20 at 12:43
Thanks a lot, Relauld, I'm really grateful. Just one more question - Will Search Engines like google view these URLs as different pages? — Raghav, Apr 13 '20 at 07:33
Hello Raghav, AFAIK no, search engines will not consider them as different pages since the content is dynamically loaded. If this is a important requirement for you you should adopt another platform or approach, like Wordpress or Server side rendering (e.g. Nuxt.js), etc.... — Renaud Tarnec, Apr 13 '20 at 07:53

Automatically Create New Pages in Firebase Hosting on user events(JAVASCRIPT)

1 Answers1