I want to add firebase to my playcanvas application. I’ve created a database to test it but I don’t know how to add it to my project.
Hi @Axel_Saucedo,
There isn’t an example, that I know of, to demonstrate adding Firebase to a Playcanvas project. But it’s quite easy, here are some steps:
- Add the Firebase SDKs to your Playcanvas project. Download the firebase .js files for the relevant components (firebase-app.js, firebase-auth.js etc.) and upload them to your Playcanvas project.
You can find links to those files in this guide, step 3:
https://firebase.google.com/docs/web/setup
- Make sure all Firebase SDK scripts are first in your scripts loading order:
https://developer.playcanvas.com/en/user-manual/scripting/loading-order/
- Grab the firebase config object from your google firebase dashboard. It will look like this:
var firebaseConfig = {
apiKey: "api-key",
authDomain: "project-id.firebaseapp.com",
databaseURL: "https://project-id.firebaseio.com",
projectId: "project-id",
storageBucket: "project-id.appspot.com",
messagingSenderId: "sender-id",
appId: "app-id",
measurementId: "G-measurement-id",
};
- You are ready to initialize the firebase app, you can put this code in any regular Playcanvas script. The initialize method will be a good place for that:
MyScript.prototype.initialize = function(){
var firebaseConfig = {
// ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
};
Hello. Here is my take on it
- Learn to use https://developer.playcanvas.com/en/tutorials/htmlcss---live-updates/.
- Use JS/HTML knowledge to communicate both ways (from HTML-front to 3D backdrop and back), but be aware of the minor/small adjustment and tricks needed to make basic JS work at PlayCanvas code editor.
- Use any DB that can work with JS.
… - As a PS: if discomfort with HTML-rendered buttons, one can play making them invisible on top of 3D button (this can save time in regards to regular 3D backdrop functionality >> in the shape of raycasting or likewise)
how would I add firebase auth to this?
so means i don’t need these two command anymore ?
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
A user email us having trouble adding Firebase 9 modules to a PlayCanvas application. I don’t use Firebase myself so not 100% sure this is the correct way but it seems to run fine and have access to the module functions
https://playcanvas.com/project/919976/overview/firebase-test
Important notes:
firebase-setup.js should have preload disabled
Thank you so much for your help @yaustar! Very helpful.
DISABLE PRELOAD on the setup file and I can import all the things I need. I appreciate you looking into this for me!
For future ref, @yaustar created a firebase folder with firebase-integration.js…
(function() {
var scriptAsset = pc.Application.getApplication().assets.find('firebase-setup.js');
var moduleElement = document.createElement('script');
moduleElement.setAttribute('type', 'module');
moduleElement.setAttribute('src', scriptAsset.getFileUrl());
document.head.appendChild(moduleElement);
})();
-AND a NON preloaded firebase-setup.js
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.11/firebase-app.js';
// If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/9.6.11/firebase-analytics.js';
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
// ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
Hey I followed all the steps to get firebase working properly, now I’m retrieving a Json file from firebase but I want to access it from other scripts with in playcanvas, since I disabled preload how can I access the JSON file?
Hi @Lukas_31,
How are you retrieving the JSON file from firebase?
If you have the file contents as a string (text), you can parse its contents like this:
const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);
console.log(obj.count); // outputs 42
Check this manual page on how to communicate between scripts and make your data available.
Thanks for reply, I figured it out