How to connect Firebase with Wix

Question

The code that I'm using is the following one:

import firebase from "firebase"
import firestore from "firestore"

export function base() {
    // Initialize Firebase
    var config = {
        apiKey: "apiExample",
        authDomain: "authDomaninExample",
        databaseURL: "databaseUrlExample",
        projectId: "projectIdExample",
        storageBucket: "storageBucketExample",
        messagingSenderId: "000000000"
    };
    firebase.initializeApp(config)

    var db = firebase.firestore(); // This line breaks the code

    db.settings({ timestampsInSnapshots: true })

    db.collection("Users")
        .add({
            test: "Test"
        }).then(function (docRef) {
            console.log("Document written")
        }).catch(function (error) {
            console.log("Error is: " + error)
        });
}

The base() function is called by clicking a button, however the code is not working, and no console logs are shown.

PS: I installed the Firebase and Firestore node packages successfully according to the Wix page

The error I get is the following:

TypeError: firebase.database is not a function

The solution that works is the following:

<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-database.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "apiExample",
    authDomain: "authDomaninExample",
    databaseURL: "databaseUrlExample",
    projectId: "projectIdExample",
    storageBucket: "storageBucketExample",
    messagingSenderId: "000000000"
  };
  firebase.initializeApp(config)

  var db = firebase.firestore(); // This line breaks the code

  db.settings({ timestampsInSnapshots: true })

  db.collection("Users")
    .add({
      test: "Test"
    }).then(function (docRef) {
    console.log("Document written")
  }).catch(function (error) {
    console.log("Error is: " + error)
  });
</script>

However I don't want to use scripts since I prefer to use typescript

I think you cant https://www.wix.com/code/home/forum/community-discussion/using-external-javascript maybe you installed the packages on your computer — cutiko, Mar 21 '19 at 00:03
that's an old answer... new ones say that is actually is possible, however is not documented properly — Andrey Solera, Mar 21 '19 at 04:07
Can you provide the link? And also explain further what do you mean with "I installed the firebase and firestore node packages successfully", please — cutiko, Mar 21 '19 at 14:16

score 2 · Accepted Answer · answered Aug 20 '19 at 06:13

2

There seems to be a hacky solution suggested by one of the users in the wix forums.

Here is the link to it, maybe this will help you.

https://www.wix.com/corvid/forum/main/comment/5c5a4ffff7055001e2d15cd4

answered Aug 20 '19 at 06:13

HexaCrop

3,863
2
23
50

score 0 · Answer 2 · answered Aug 01 '19 at 11:34

0

This might be helpful "The short answer is no - Wix Code only supports its internally used database."

more details https://www.wix.com/corvid/forum/community-discussion/is-there-a-way-to-connect-to-firebase-database

answered Aug 01 '19 at 11:34

Lasitha Lakmal

486
4
17

score 0 · Answer 3 · answered Dec 16 '19 at 15:19

The accepted solution is problematic, and hacky equates to fragile. So when it breaks, you may not be aware of it for some time or it may break often. The best solution is to use wix and

Using wix-router and wix-fetch you can write code that pulls information from incoming requests for the profile page, queries an external database to retrieve the information for the page, and then injects that data into the profile page

https://css-tricks.com/wix-code-database-data-modeling/

How to connect Firebase with Wix

3 Answers3