Firebase

Learn how to connect to Firebase Cloud Firestore or Realtime Database

Prerequisites

Firestore requires a specific configuration to connect from the client. Firstly, open your Firebase appSettings - Web App Connection. Copy the setup script, that will be used later for integration:

Copying Firebase setup script

If there is no web app connection available, create it:

How to create a web app connection in Firebase

Below is a sample of what a setup script might look like:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAPdpNh8btOoljD2pT5VFj3QX-Ja9MofPk",
authDomain: "fir-project-5b417.firebaseapp.com",
projectId: "fir-project-5b417",
storageBucket: "fir-project-5b417.appspot.com",
messagingSenderId: "385181373030",
appId: "1:385181373030:web:d497382fffd59eccb793a7"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>

Configuration

Open UI Bakery Project – Data sources - Connect - choose Firebase from the list

Specify Datasource name, then paste the copied script into the Configuration field, then enable Firebase products you are going to use (e.g. Realtime Database)

Adding Firebase as a data source

Click Connect

Now, can learn how to manage your data from Cloud Firestore or Realtime Database