Getting Started with Firebase 9 #4 - Firestore Setup & Fetching Data

Hey gang, in this firebase 9 tutorial I'll show you how to setup & connect to a firestore database and fetch data once from a collection.
🐱‍👤 Course files:
github.com/iamshaunjp/Getting...
🐱‍👤 My Premium Udemy courses:
thenetninja.co.uk/udemy/react...
thenetninja.co.uk/udemy/vue-a...
thenetninja.co.uk/udemy/moder...
thenetninja.co.uk/udemy/d3-an...
🐱‍👤 Get access to all other premium courses on Net Ninja Pro:
netninja.dev/
🐱‍💻 My Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@JonMartins]

Finally!!! I've been looking on how to use Firebase/Firestore version 9 for the past two days. Loads of implementations. Firebase team really need to improve their docs. Thanks for that!!!

[@constantine9074]

Ive searched whoe youtube and web but this is the most comprehensive tutorial as of today !!!!!! dont waste your time.. this channel is all you need

[@jarrodbogard]

your channel is so awesome. I spend hours trying to figure things out by reading documentation/articles and watching other tutorials, and then I watch one of your 10 minute videos and bam problem solved. thank you!

[@bitterkofte]

same for me too, ninja's videos work as a charm

[@livewell453]

My god I am SO GRATEFUL FOR THIS VIDEO AND FOR YOUR CHANNELL DUDE. I tried six different tutorials but the way you explained things and walked us through step by step is getting me past where I was stuck ! :-)

[@miguelmason2536]

trust me i have been looking all over the internet to figure it out and them BOOM .. Thanks @ The Net Ninja

[@ashish_infinty2452]

thanks a lot bro, i been facing lot's of trouble using firebase , you made it easy . you don't know how much I'm grateful for once again thanks

[@lloyddugmore3554]

Bro!!! this was amazing, spent 2 days fighting with new version of firebase in a react app.... thanks for this

[@saqibsyed8908]

I was so much confused after seeing a lot of objects in repsonse but you helped me solve it. Thank you!

[@sebastianadams]

thank you so much, i tried three other tutorials and all of them left me with firebase not working at all because there were steps missing (I guess..!) but I have your example working pretty much in the time it took to watch the video. Amazing tutorial!

[@thawyezaw5480]

What an excellent explanation, man!

[@fanboyono7960]

Seriously, what an amazing tutorial.

[@user-zz7bc1xm7g]

I have solved several problems watching your video, thank you very much!

[@himanshuchauhan9208]

And just like that you solved all of my version 9 related problems thank you very much.❤

[@sananasir2436]

Thank you Ninja for being there..

[@jomy10-games]

Once again The Net Ninja to the rescue. The firebase docs did not help on this subject, but you got it right!

[@jawadshaikh1745]

Your teaching way is awesome, Love from Pakistan ❤

[@benmoody9334]

Amazing choice of book! Bring on number 3

[@tharakaariyarathna9003]

This was very helpful. Thanks🙌

[@alimusa1056]

thanks a lot for this tutorial you saved my day love u man 💖💖💖

[@AARP41298]

thank you so much, now i can read and understand the offical docs

[@pagevpetty]

Shaun, this is great! Thank you so much! Are you going to be covering Firebase STORAGE in this course??? Pretty please do 🙏 😻

[@nickkaragiannis8494]

My man reading every book on my personal favorites list. Not only the best teacher but a man of culture as well :D

[@codinghusky5196]

My main praising the dude for being nearly as good as himself... Not only pretentious but narcissistic AF.

[@jaumegenaro7673]

@@codinghusky5196 its not that deep

[@felixbecquart]

You definitly become my favorite teacher (just in front of Maximilian Schwarzmüller)

[@cookpatrick.9737]

Hello

[@maskman4821]

The Net Ninja is the best 🤩

[@danielmartinezvillegas4166]

ooooffffff Maximilian Schwarzmüller top

[@hamidr8391]

Thank you sooo Much!! genuine content

[@charlenem6040]

this works so well thank you!!

[@NetNinja]

You're welcome! :) glad it helped

[@edisonmondal2798]

Sir! You have saved my life ❤❤🔥🔥🖤🖤

[@brunoalexandre4274]

huge help, keep going!

[@romanr5962]

God bless you, man. Thanks

[@darrionn33]

i just wanna say you have amazing taste in books

[@bubsztyn]

8:26 just a small thing that cought my attention - you are adding elements to array but you don't change the referenced object so const would be fine (preferable) in this case. Also maybe that's intentional for the simplicity sake but using .map there is much cleaner imo. Anyways, great tutorial as always!

[@SwankyMarrow212]

Would you recommend doing a for loop instead of forEach when doing this sort of iteration as it would typically be faster? Obviously, this data set we are working with is very small, so it won't make a noticeable difference. If the bottleneck is going to come from the google side of the fence, it may not matter

[@DDOCTORGaming]

Hi, by any chance do you have a video which you can link me to, that tackles the function of reading out-loud data fetched from Firestore as audio to user? Thanks

[@justthinguyen]

you just saved my day!!!! thank you sooooo much!!!!!

[@NetNinja]

Glad it helped Thi! :)

[@bluewonk9232]

Thank you so much !

[@ChandanKumar-of1je]

Who's the best? who? who? who? ... everyone: The Net Ninja Shaun

[@maskman4821]

+1

[@opiojohn]

Thanks a million times

[@mrhidetf2]

The name of the wind is an amazing book. Great example :p

[@mohamedikbalbenahmed9427]

Could you please tell us how to use the reading functions that are mention in the docs ( Using await )

[@matthewbeardsley7004]

Any particular reason you used let over const for the books array instead, as it's not reassigning the variable, so the code would work.

[@salsabeel1077]

Bro Thanks a lot i spend many hours to figure this out this 10 min video easily find the solution😁🤩

[@NetNinja]

Awesome to hear! :) 👍

[@tech3425]

Great course! Looking forward to more indepth Firebase 9 courses

[@anandgomaskar2210]

thanku so much upload this video sir

[@pranavrajeshmadhani6260]

extremely helpful especially given that firebase docs suck.

[@anazi]

I love you man !

[@tuananhdo1870]

10:09 I think we can also use the 'map' method here

[@chriswestphal26]

mind sharing where or how you get that firebaseConfig?

[@Yogamindmastery]

Net ninja is the best

[@syedzeeshanjafar137]

Can someone help me with a problem. After we initialise everything at 7:38 he says that we open it in browser preview but when I do it nothing comes up

[@jonathanm.5813]

I've got a weird error => Module '"firebase/firestore"' has no exported member 'collection', is it because typescript is allergic ? :)

[@dm33472]

for my firebase, i have a document within a collection which is within another document within another collection, so basically it is in this form: appliances/Home/TVs/Auto-ID. Ive done what youve done above and it doesnt seem to work, im pretty sure its because of the structure of my firestore database. i cant see the innermost data that i want. how can you help me

[@denisewasserman2180]

If there is another collection in the current collection, how can I access it? For example, my quiz app has different categories and within those categories there is a different collection of questions. I would be glad if you help :))

[@IliyaDamyanov]

Nice video

[@swapnilcodes]

How to join two collections in firebase?? Suppose I have two collections which contains movie name n id and another contains movie id from first collection and other movie details...then how can I join those collections??

[@johncmm9759]

Hey man! I referenced your code and learned from you for an app I'm launching. Would you prefer I credit you in the documentation? Thanks for all the help man you've been of great help in my coding journey!

[@nanditanikam1202]

Thanks a lot

[@PeriklesPeriklesoglu]

thank you

[@ahmedabdel-aal8404]

This video is amazing I have been searching the web for 2 hours and this was the only actual tutorial that worked, thanks and keep it up

[@NetNinja]

Glad I could help :) thanks

[@ukasz7413]

Hi, did you change something to make it work for you? I do everything in the guide and at 7:21 I have no results.

[@filipantonsson6204]

Anyone know what kind of code formatter he's using? I think I've seen before that he's using Prettier, though my Prettier doesn't look the same...

[@mohamedyoussef8835]

Awesome Tutorial ++++++++++++++++++++ Thank You

[@homeofsports3295]

where did you get the firebaseConfig?

[@himbary]

You are the best

[@user-qp6yp4qk9i]

ran into a problem "module does not provide an export named 'getFireStore'". how to fix it?

[@heyIappreciateit]

Can you please include the admin sdk on this tutorial? Please?

[@tamalemuncher789]

How do I access the individual properties of each of those

[@ShadyPencil]

Duper eager for the next video. I wish you'd do a netflix type release all episodes in one go 😀

[@DavePerth]

You can, check out the first video in this course that mentions how to do that!

[@michaeljojo6305]

"Unhandled Rejection (FirebaseError): Invalid collection reference. Collection references must have an odd number of segments, but *path* has 2." Does anyone know how to fix this problem?

[@scars5019]

how would i be able to load my data from my firestore DB onto my HTML table as i completely stuck so i would really appreciate it if someone could assist me with this please

[@christianedwin7597]

I ran into a problem of can't use import outside of module while importing the initialize app on firebase , Went back and added type:"module" to Json file , And added type module to the script but it's still not working

[@nyambe]

Where do we set the type in doc.data()

[@nemanjamijucic]

Save button is disabled when I tried to create a collection and add it's first document.

[@udaykiran4912]

web pack is necessary for firebase 9, without webpack i didn't get output

[@ignacioleal8651]

Is there a new update that age TS the way this is done because it's giving me an Error that .initalizeApp is not a function

[@user-jf1pc4us8q]

Sir, Your tutorial is great. But I have a question in my mind. If someone inspects the website ,can easily copy and paste the Firebase configuration and can easily get access to it. So how can the problem be solved? Please help😢

[@nickkaragiannis8494]

Can you create a video on how to intergrate firebase with angular?

[@saksshi]

Can someone help me with a problem. After we initialise everything at 7:38 he says that we open it in browser preview but when I do it nothing comes up and I do not understand how to overcome the issue

[@syedzeeshanjafar137]

same

[@AzanVlogs671]

same @@syedzeeshanjafar137

[@beep1677]

can someone tell how can i access a nested doc for ex I have collection products inside products each doc has sub collection of categories . so path goes products/pid/categories/cid so then how can i access the document of sub collection that is categories (bad example but u got it). Thanks.

[@codescooper3068]

have you find how since ?

[@NoeCortes]

hello sir, I just followed every step of the way but I get this error message saying "doc is not defined" please help

[@cianodubhghaill]

I followed along but wasn't able to get the data from the database onto the console

[@zwozoa5630]

ur awesome

[@nicetomeetugaming7024]

Good.

[@terminatrs1301]

i copied exactly but it is not able to get data from from my collection.... pls help someone

[@marcosboero6881]

Kvothe approves

[@balsahajdukovic7734]

The goat book

[@darrionn33]

was looking for this comment the moment he said notw🤣

[@Alexicoo]

Aaaaaand stuck :"Uncaught SyntaxError: Cannot use import statement outside a module"

[@Engieboy12i]

You legend

[@chrisamuzie401]

I am getting this annoying error saying @firebase/firestore: Firestore(9.6.2) could not reach cloud Firestore backend. Backend didn't respond within 10 seconds. Help me please sir :(

[@codescooper3068]

same problem have you find why since ?

[@alexpiano]

I had to re-run npm run build again to be able to console.log the snapshot.docs

[@jazellefatimaimperial7899]

important

[@aaronl8443]

you are god!

[@codewithallen]

can someone help.. it giving an error "can't use import module outside......"

[@yun-ruzeng5026]

gooooood

[@va9if]

8:44 just use .map(d=>d.data())

[@CryPoison]

ı had "Couldn't react backend" "Permission denied" error. I just needed to "npm run build" again to initialize webpack. BTW ninja's folder might be old. Try with your own project.

[@iBen-ry6pj]

Am following your v9 tuts while using v10.1.0. While the imported methods are all the same, the properties of the objects they return keep changing from version to version. Now docs from getDocs are so deeply nested that I feel provoked. Also, I could only find doc's ID in an array(imagine the nonsense) in one far deep nest. Am not even sure if this id will maintain it's index for everything doc in every collection. 😢

[@ilyesilyes8483]

Did you find any up to date tutorials or document for the new version(v.10), if you did plz let me know.

[@markograhovac6860]

Is laravel 8 tutorial coming this year?

[@tuananhdo1870]

I think laracast do a very good job, but other than that, net ninja is my goto

[@althairmahatirta5503]

wow thank you! i

[@NetNinja]

You're welcome! :)

[@Yogamindmastery]

If someone is unable to fetch data from firebase then check firebase rules tab

[@nigelpallatt]

With the greatest respect to you and Firestore/base: Do you really think in this day and age that anyone would go through all of this just to link to a DB I thought the point of software is to make it easy for the user, this is not easy its CRAZY, config this import that my head is spring and I have no idea what's happened or happening - I'm back the MySqli...

[@iBen-ry6pj]

That not being enough, they keep changing the return object of getDocs. In V10.1.0, you'd never guess where a doc id is.

[@manoj-k]

🔥🔥🔥

[@livewell453]

I’m having an issue with the array returned being a length of 0 but containing a whole list of properties and technical jargon, instead of containing the data in the collection. Gonna go to bed now and try again tomorrow afternoon :) anyone had a similar problem?

[@Kingerious_]

yep im having the same problem i think im gonna try going to the docs

[@kezicss]

same problem

[@kezicss]

nvm i skipped the part at 8:30 where he changes the code to show doc data

[@bid0u12345]

Did I miss something or you don't show us how to actually display both authors and titles on a webpage? Because displaying it in the console alone is useless. 🤔 How do I use, for example; books.title in a return statement like My first book's title: {books.title} ??

[@vishalanthony1529]

Way Better than Maximilian.

[@thomasventura6412]

Uncaught (in promise) FirebaseError: Missing or insufficient permissions. anyone else having this problem?