Firebase Realtime Database setup with hosting URLS

user_13898069 0
Viewed 842

I'm new to Firebase and building a React app backed by the Firebase Realtime Database.

According to the docs - you can use the reserved hosting URLs to initialize the Firebase SDK. In their words:

To initialize Firebase in your app, you need to provide your app's Firebase project configuration. If you use reserved Hosting URLs, your Firebase config is automatically pulled from your Firebase project, so you don't need to explicitly provide the object in your code.

However in their docs for the Realtime Database Initialization they say to initialize your SDK using the following code snippet:

  // TODO: Replace with your project's config object
  var config = {
    apiKey: "apiKey",
    authDomain: "projectId.firebaseapp.com",
    databaseURL: "https://databaseName.firebaseio.com",
    storageBucket: "bucket.appspot.com"
  };
  firebase.initializeApp(config);

  // Get a reference to the database service
  var database = firebase.database();

This looks like a config object. But if you're using the hosted URLs aren't these pulled from your Firebase project? Does anyone have an example of how to use the reserved Hosting URLs with the Realtime Database?

firebase-hosting firebase reactjs javascript
2 Answers

See https://firebase.google.com/docs/web/setup#add-sdks-initialize

How you add Firebase SDKs to your app depends on whether you've chosen to use Firebase Hosting for your app, what tooling you're using with your app (like a bundler), or if you're configuring a Node.js app.

  • From Hosting URLs
  • From the CDN
  • Using module bundlers
  • Node.js apps

If you use reserved Hosting URLs, your Firebase config is automatically pulled from your Firebase project, so you don't need to explicitly provide the object in your code.

It is in case of From Hosting URLs only.

Initialize Firebase in your app (no need to include your Firebase config object when using reserved Hosting URLs):

And you should initialize Firebase like the following code.

<body>
  <!-- Previously loaded Firebase SDKs -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>

You can see a __/firebase/init.js sample https://friendly-pix.com/__/firebase/init.js

From Hosting URLs samples:

Could you check the other samples?

user_113290710

For the Firebase SDKs to be able to find your Firebase project on the servers, it needs certain configuration data. There are multiple ways for it to get this data. In your scenario the two relevant ways are:

  • You can specify the configuration data inside your code with a snippet of JSON that you copy from the Firebase console
  • When you use the Firebase emulators and/or deploy to Firebase Hosting, it can automatically get the configuration data through a "magic" file called /__/firebase/init.js

Both these options are also listed in documentation on adding the Firebase SDKs to a web app under From Hosting URLs and From the CDN. From that documentation, this is how you auto-configure the loaded SDK:

<body>
  <!-- Previously loaded Firebase SDKs -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>
user_2091030
Related