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
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
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
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/
Related
I tried making a simple chat forum using YouTube tutorial. upon its release it works wonderful so I tried using its code structure while updating the core infos and it only result in an error. I tried many time to avail, I'm new to programming so im looking for help.
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js"</script>
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-database.js"</script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyCTBkpUWMU_pL6qIb_hMXVDS_sCYQ2BROU",
authDomain: "rd-try-ce276.firebaseapp.com",
databaseURL: "https://rd-try-ce276-default-rtdb.firebaseio.com",
projectId: "rd-try-ce276",
storageBucket: "rd-try-ce276.appspot.com",
messagingSenderId: "47874427531",
appId: "1:47874427531:web:819f34b203e6ae82c0628e"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebase);
function sendMessage() {
alert("Hello! I am an alert box!");
//get message
var message = document.getElementById("message").value;
//save in database
firebase.database().ref("messages").push().set({
"message": message
})
}
</script>
I was reading through Firebase web documentation on reading and writing data from a database, I want to add dynamic counters on my github website so i figured Firebase would be the way to go, I attempted to use code found on the documentation as an example, but the example simply outputs an error "Uncaught SyntaxError: Illegal return statement", below is my testing code i ran, the error occurred at line 22(the return statement)
<body>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDsjjwO1Jj0VKeZECp6l2NRgOKy9Yb0fYc",
authDomain: "site-counter-555dd.firebaseapp.com",
databaseURL: "https://site-counter-555dd.firebaseio.com",
projectId: "site-counter-555dd",
storageBucket: "site-counter-555dd.appspot.com",
messagingSenderId: "796019929207",
appId: "1:796019929207:web:51db340ecf1a53891e1672",
measurementId: "G-33WHDZ8X6K"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script>
var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/Downloads' + userId).once('value').then(function(snapshot) {
var username = (snapshot.val() && snapshot.val().username) || 'Anonymous'
});
</script></body>
You're trying to use a return statement that's not within a function. Start by removing the return - there is nothing to return from.
I'm trying to link my contact form in a portfolio website to firebase and keep getting (firebase.database is not a function) in my console
This is for the web, using pure javascript
var firebaseConfig = {
apiKey: "AIzaSyCzX3r8CFw84WSBuCSXR1fWM_hDrwtGMSs",
authDomain: "portfolio-4c243.firebaseapp.com",
databaseURL: "https://portfolio-4c243.firebaseio.com",
projectId: "portfolio-4c243",
storageBucket: "",
messagingSenderId: "745737502175",
appId: "1:745737502175:web:a26e5b0baa3769c9"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var messagesRef = firebase.database().ref('messages');
document.getElementById('contactForm').addEventListener('submit', submitForm);
function submitForm(e) {
e.preventDefault();
var name = getInputVal('name');
var email = getInputVal('email');
var message = getInputVal('message');
saveMessage(name, email, message);
}
// Function get value
function getInputVal(id) {
return document.getElementById(id).value;
}
//Save
function saveMessage(name, email, message) {
var newMessageRef = messagesRef.push();
newMessageRef.set({
name: name,
email: email,
message: message
})
}
This error is very common and arises because either you have not configured your config object correctly or the script tag required for using that particular functionality is missing.
In your case the config object looks fine so you have to add this script in your page
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js"></script>
But please note that this script is to be added only after the core script for firebase app
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
and for future if you want to use any other service from Firebase like Firestore or so, just make sure you have that particular script tag in there (with the config object correctly setted up).
For some reason I can only read and write in the firebase realtime database when I am connected to the wifi that I created the database on. Do any know a reason as to why this is happening?
I tried to debug the issue, however, my console log is not showing any details when I run the code that pulls a query. (assuming my credentials are correct)
import * as firebase from "firebase";
var config = {
apiKey: "********",
authDomain: "********",
databaseURL: "********",
projectId: "********",
storageBucket: "********",
messagingSenderId: "*******"
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
console.log("initialized");
}
componentDidMount(){
console.log('before query function call');
firebase.database().ref().child('messages/').once('value', function (snapshot) {
console.log('in query function call');
console.log(snapshot.val())
});
expected results in console log
---initialized
---before query function call
---in query function call
---(snapshot of data in realtime database)
actual results in console log
---initialized
---before query function call
Well, simply put, I cannot receive messages via my WebApp using JS. I am receiving tokens and I am able to send messages via Firebase console to the WebApp's token, but I am not getting any receiving.
Here is my JS Code:
var config = {
apiKey: "AIzaSyBLCsBQVXLsDjPhjdkvJVMGyDUcfWrFtQU",
authDomain: "php-test-project-78c66.firebaseapp.com",
databaseURL: "https://php-test-project-78c66.firebaseio.com",
projectId: "php-test-project-78c66",
storageBucket: "php-test-project-78c66.appspot.com",
messagingSenderId: "856365479454"
};
firebase.initializeApp(config);
$(document).ready(function(){
const messaging = firebase.messaging();
messaging.requestPermission().then(function() {
console.log("Permitted");
return messaging.getToken();
}).then(function(token) {
console.log(token);
}).catch(function(error) {
console.log("Not Permitted");
});
messaging.onMessage(function(payload) {
console.log("TEST");
console.log("Message received. ", payload);
});
});
Upon sending message via Firebase Console, I do not receive anything. I send by using TokenID.
PS: The keys are of a Dev Testing App, hence I kept it in. If admins consider this a problem then you may remove it.