Cant seem to connect to Firebase? - firebase

Good day to any that bother to read and possibly respond to this query. I am currently trying to begin my small project that involves the use of Firebase. Being my first time using firebase I guided myself mostly by the tutorials that I was able to gather from youtube and the instructions given out by Firebase when they ask you in creating a new project. I feel I am stuck in this part of the instructions.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.13.2/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 src="/__/firebase/7.13.2/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
It says to add it to the bottom of the tag. Did so, then tried to add some stuff to the db by following this tutorial : https://www.youtube.com/watch?v=7lEU1UEw3YI&t=726s
But alast I get nothing.
I am quite last, I have asked a couple of my clastmates and they say they either havent tried Firebase yet or their project doesnt require Cloud Base storage.

This line of code below, is when you use Firebase Hosting
<script src="/__/firebase/7.14.0/firebase-app.js"></script>
if you are on your own server / localhost use
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>
See this
Add Firebase SDKs and initialize Firebase on From Hosting URLs tab and From the CDN tab

Related

access firebase from client JS hosted at githubpages

I'm developing a hobby project on blazor hosted on githubpages.
I want to add a database to it, and I'm trying to use firebase storage for the thing, but all tutorials I see require npm and seem to be server-side oriented or at least only for Node or React or those.
Likewise, I found other tutorials on how to do that from ASP hosted Blazor app, on the server side. Does not fit my solution.
Is it possible to access it from the client's raw JS code or, even better, from blazor WASM client side itself?
You can add it to the bottom of the body tag, like so:
<body>
<!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
<script type="module">
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/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.15.0/firebase-analytics.js'
// Add Firebase products that you want to use
import { getAuth } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js'
import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js'
</script>
</body>
Source, if you need more info: https://firebase.google.com/docs/web/alt-setup
Also, if you need a db maybe you want Firestore or Realtime Database instead of Storage.

How to configure firebase cdn / caching in Vue.js app?

I have developed my project using vue.js webpack template. I want to configure firebse cdn/caching. But have no idea what to do..
I have gone through the document https://firebase.google.com/docs/hosting/manage-cache
And found that
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
to be added. But wheredo i add in my vuejs project before deploying. Please if anyone could help me.
The method res.set sets the response’s HTTP header field to value. This link you have provided, refers to setting the headers when using Google Cloud Functions. You can take a look at this Github link containing an example about Google Cloud Functions which include how to set these headers in NodeJS. To get more general information about res.set() and how you can set these headers in your own application, you can also take a look at the official documentation.

Dotnetnuke You have included the Google Maps API multiple times on this page

I am using DNN 7.3 and Porto theme.
I am getting error in console:
You have included the Google Maps API multiple times on this page.
This may cause unexpected errors.
I also get warning
Google Maps API warning: NoApiKeys.
I am including it in Google-recommended way, with my API key:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=my_api_key&callback=my_callbak_function"
type="text/javascript"></script>
In page source I see
<script src="//maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
which was added by DNN (or Porto theme) and this is the cause of the problem, but I cannot find where and how to disable it (or edit so it includes my api key).
I dont have much experience with DNN so any help is welcome.
Checking with the theme developer us usually the best approach.
I received a DLL from theme developer that does not add Google Maps API javascript and that has fixed this issue.

What is the difference between the two Google JS client CDN's?

A) <script src="https://apis.google.com/js/api:client.js"></script>
versus
B) <script src="https://apis.google.com/js/client.js"></script>
The only differnence being the api: before client.js.
CDN A is used in the Google Sign-In for Websites docs in the Building a button with a custom graphic section.
CDN B is used almost in the Google API Client Library for JavaScript (Beta) docs.
They both appear to work interchangeably.
Short answer: there is no difference
Long answer:
The Google JS client CDN is a bit weird because the actual JS you get is dynamically created based on the file name you provide.
You can load multiple components of the library by constructing the URL as module1:module2:module3.js
api is the core part and is always loaded even if you don't add it to the list of modules, because it handles loading the other modules.
Theoretically you could just include api.js and then dynamically load extra modules by calling gapi.load("module", callback) which is exactly what happens when you load api:client.js or just client.js
If for example you would want to use the API Client Library together with the new sign-in methods you could include api:client:auth2.js or client:auth2.js.
And for extra confusion you could even include https://apis.google.com/js/.js which is the same as https://apis.google.com/js/api.js
Use links only from the documentation!
Simple to check this:
1) Add to header of your page this script:
<script src="https://apis.google.com/js/client.js"></script>
Open DevTools -> Network
I see:
2) Change link to other script
<script src="https://apis.google.com/js/api.js"></script>
Open DevTools -> Network
I see:
api.js is the core, when client.js is the module.
Here a completely different content: https://apis.google.com/js/platform.js

google maps API v3 not working with cordova

I'm trying to use the google maps on an Android app. I include the Google Maps API with
<script type="text/javascript" src="http://maps.googleapis.com/maps/api /js?key=my key&sensor=false"></script>
Every website is whitelisted with
<access origin=".*"/>
in the .xml.
But i still get an error
Uncaught referenceError:google is not defined
So, the API couldn't be loaded.
The code works perfectly when running on my PC but this happen when I put it on the mobile device, showing that the problem may come from cordova.
My device of course has an internet connection, any idea on how to fix that?
Assuming this is just a typo, but you have a space in your url, and now I believe the url is: http://maps.google.com/maps/api/js?key=yourkey&sensor=false

Resources