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.

Answer 1

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>

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

Question

1 answers

solution1
1 ACCPTED 2020-04-12 11:01:31

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

Question

1 answers

solution1 1 ACCPTED 2020-04-12 11:01:31

solution1
1 ACCPTED 2020-04-12 11:01:31