How do I configure the Firebase SDK for the codelab? - web

Question

I have followed every instruction as it is in the codelabs tutorial for the FriendlyChat app to the best of my understanding.
I pasted into the index page the code generated from clicking the Add firebase to your web app icon in the console.
However, when I run firebase serve and load the page at localhost:5000, I get an alert telling me I have not configured and imported the Firebase SDK.
How exactly do I configure and import the SDK?

Answer 1

You just have to paste the initialization snippet from:
Firebase Console > Overview > Add Firebase to your web app
in index.html file in web-start folder.

Answer 2

I found the the above answer a bit unclear but managed to solve it with this method in case it helps anyone:
Go to the Firebase main page
Top right (next to your profile image) you'll find 'Go To Console' click on it
There you'll find your 'FriendlyChat' project, click on it
On the left, under the Firebase icon, you'll find a gear icon (settings), go there
Scroll down and you'll find a window with your web apps
There is a title 'SDK setup and configuration '
Make sure you include the 'automatic' code in index.html if you haven't already. It will look similar to this:
<script src="/__/firebase/8.6.3/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/8.6.3/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
Make sure you include the 'CDN' code in index.html if you haven't already (remember to put it before any firebase script calls). It will look something like this:
<script src="https://www.gstatic.com/firebasejs/8.6.3/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="https://www.gstatic.com/firebasejs/8.6.3/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "...",
authDomain: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
appId: "...",
measurementId: "..."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
Note: if you didn't include analytics I suppose you shouldn't include the analytic scripts (just copy and paste the code given to you on the website)
This stopped the alert from showing up for me.