Firebase - Ultimate Beginner's Guide

UPDATE. See the latest basics video here: • Firebase - Back to the...
Master the basics of Firebase in 20 minutes. In this episode, we run through hosting, auth, firestore, storage, and cloud functions using nothing but plain JavaScript. angularfirebase.com/lessons/t...
- Firebase firebase.google.com/
- CLI Tools github.com/firebase/firebase-...

[@alexandermccomb6444]

Firebase is like magic. No one really understands it, but people love watching it happen.

[@BilalAhmad-gy5zu]

1:34 Project Creation on firebase console 2:15 Creating project locally 4:45 Firebase Authentication 7:25 Firebase Database 14:50 Firebase Storage 16:52 Firebase Functions

[@animetales4767]

can someone help me here? I would like each of my users to have their own unique token, but I see that all the users I create on a specific device all have the same token .svp any idea? here is the code i used : FirebaseUser mUser = FirebaseAuth.getInstance().getCurrentUser(); mUser.getIdToken(true) .addOnCompleteListener(new OnCompleteListener() { public void onComplete(@NonNull Task task) { if (task.isSuccessful()) { String idToken = task.getResult().getToken(); // Send token to your backend via HTTPS // ... } else { // Handle error -> task.getException(); } } });

[@steve11329]

Legend

[@nhungbi2401]

thanks!

[@Fireship]

UPDATE 2020 see the latest Firebase Basics video here kzbin.info/www/bejne/p2atZpulbL6InqM Today we go back to the basics. In 20 minutes I cover pretty much everything you will get out of a full entry level Firebase course using vanilla JS. Also, I wanted to share my personal reasons for choosing Firebase.

[@Tech_Enthusiast_001]

Awesome overview and very well presented. I would love to see a full tutorial series like this actually. Keep it up!

[@issamhammi9158]

I truly needed that one! Thank you and keep going!

[@yuriscarbaci124]

this video was exactly what i was looking for, a "why should i use firebase, what it offers me and how easly i can use it" explanation. Great video and the contents you put in the video in 20 min really explain a great deal of real life problems developers has to solve in day-to-day development, meaning i will be back to check out this video from time to time. thanks a lot for sharing!

[@sagarmali89]

Hey i getting error firebase.auth.signInWithPopup is not function, plz help out

[@vineetpandey8685]

My program is not showing the displayName of the user which was shown at 6:40 in the video. Please tell me how to resolve this. I am getting this output on screen :Hello ${user.displayName} instead of Hello Vineet Pandey

[@generaldiscernment]

This was a fantastic overview, I'd say you need basic programming knowledge but it really walks you through in a clear way no matter your level of understanding. Great stuff.

[@danielevans960]

Thought this was great at showing an existing programmer the power of using firebase versus their current preferred code. I would agree with the other commenter it was probably not an absolute beginner's guide, but this was very useful to me. Thank you for taking the time. Subscribed!

[@programminghumanway1858]

You got my full attention throughout the video. Not a lot of content creators are skillful to engage users in 1 minute of video. Thanks for the awesome overview of the firebase. Just the right content I was looking for.

[@magmaticly]

Most tutorials blather on and on about unimportant things. This 21 minute video is like hours of regular tutorials. I love it!

[@broosmax]

Daaaamn, this is like a firestorm of information being injected into my brain. I had to play the video at 0.25 speed to be able to follow... Good luck, "beginners"!

[@serhatkoroglu6708]

just start to try it it's more convenient way to understand

[@shahedtheboss]

I don't understand a single word after 4:00 😂😢

[@adriantadros503]

Fantastic video, thank you. A very nice quick overview of what Firebase is and what features it has. As a long time JS dev, I found the code examples were nice and simple and easy to follow to get a basic understanding of exactly how each feature works. This is a dream for JS devs who want to get a MEAN app built and deployed out in the wild. You get so much out of the box - Google CDN, SSL enabled out of the box, real time updates and not having to worry about web hosting, mongo hosting, etc. I'm inspired to build something now!

[@Welcometomyjourney20]

Really the most complete firebase/firestore tutorial on KZbin. Thanks a million!

[@Vaygeth]

Lot of effort put into the vids, one of my fav dev channels. Keep up the good work

[@samshanmukh]

my mind is blown. that was an amazing tour of the firebase. And thanks a lot for the effort that you guys put in so the beginners like can learn a few things. again great tour of firebase and it's functions :)

[@sumantkanala]

Very well explained about how firebase is not only quick and easy to setup but also production ready our of the box for many use cases. Great work. You are a gift that keeps giving to the web dev community! Keep it up.

[@Fireship]

+Sumant. Thank you , I am very happy to hear that :)

[@tristangruener9571]

the quality of your videos are amazing and they're super helpful, thanks!!

[@JamieMcI]

I needed this big time when I was starting out with Firebase/Firestore. Excellent overview and serves as a solid refresher.

[@Fireship]

+Jamie Thank you. It's nice to mess around with the regular web SDK every once in a while.

[@davidakposibruke5444]

This really helped clear up so many questions I had about firebase. So great!

[@parikshit804]

This is the first video that I watched for firebase; and I LOVE IT! great demo!

[@Fireship]

Nice! Firebase is seriously the best :) That's why I made this channel.

[@facundoalvarado9]

Man, this thing is so powerful. Can't understand why I waited so much to start using it. Will certainly give it a try!

[@ReviewLiveTv]

Its 's guide. It's fast but helpful. It took me an hour to catch up that he already made changes within maybe 5 frames. Thank you

[@therealchrif]

Thanks for all your videos, you are the greatest.

[@Fireship]

Thank you :)

[@littlebeantheboss423]

Perfect video. Doing a hackathon at my company and needed a quick overview of firebase and this gave it to me quickly and perfectly

[@steve-banbury-creative-xr]

Not seen it in the comments, but it seems we have three deprecations in the latest SDK since this was published: 1) at around 16:24: .downloadURL is deprecated - I changed to .ref.getDownloadURL().then(... to get it working. 2) at 18:18: functions.config().firebase has been replaced with process.env.FIREBASE_CONFIG 3) at 18:50: we now need a snapshot in the param and reference that when referring to the document. i.e. .onCreate((snapshot, context) ... const docId = context.params.productId ... const name = snapshot.data().name ... Great video though - many thanks!!

[@skymike4119]

16:24 replace with task.snapshot.ref.getDownloadURL().then(function(downloadURL) { console.log("File available at", downloadURL); const url = downloadURL; document.querySelector("#imgUpload").setAttribute("src", url); }); }

[@Cyphlix]

very helpful, thanks. For ts users; .onCreate((snap, context) => { const docId: number = context.params.productId; const value: any = snap.data(); const name: string = value.name;

[@xnrivudxkskalflvk4075]

doing god's work

[@BlissAden]

16:24 for the downloadURL I changed the whole function to async await and just done this: const url = await task.snapshot.ref.getDownloadURL(); document.querySelector('#imgUpload').setAttribute('src', url); which is much simpler

[@garrettgreen242]

This made things soooo much clearer, THANK YOU!!!

[@paulynuckhas1291]

OMG, you're game-changing. Thank you for this, I think this is my next step in development. I got so many ideas. Thank you :D :D :D :D

[@bensonmwaura9494]

Excellent insights yet again. Nicely done!

[@buddyguy6816]

Some of you guys misunderstood the "beginner" thing. This is not a beginner video for JavaScript. It is a beginner video for Firebase. You can't expect to get the most complex features of JS like callbacks and promises in a 20 min vid. And about the "not up to date" part. Of course it will not be up to date because these technologies evolve with the speed of light. It was up to date when it was recorded. And if you see something not up to date, just do what Stephen Banbury did, instead of whining. Thanks for this awesome tutorial!

[@dennispilat]

I think you did a really good job! Keep up the great videos. Very helpful, as I’m trying to develop a SAAS.

[@cananard]

Now I finally understand what's all the hype around Firebase... Awesome !

[@musaddiqurrahman1949]

Woah! Amazing video! feels like there's no limit on what we can do!

[@JuanMartinez-ye8ug]

Thank you! Firebase kept popping up and I was wondering what it was all about, so essentially is a "Back-end as a service". Pretty sick!

[@elsonmendes610]

I'm very excited to learn this cool stuff!

[@mahghuuuls7290]

It helped, however many steps were skipped making it hard for a beginner to follow.

[@profil4e]

well it's a Beginner's Guide... when i started watching the video i also thought that it will cover actual api commands, but i guess an introduction to what it can do is also a Beginner's Guide ;D

[@digitalday4972]

Definitely not a beginners tutorial, hard to follow if you don't have any experience

[@sebastiangudino9377]

Hard disagree. I'm watching this video BECAUSE having absolutely zero experience with firebase (Why else would I watch a Firebase beginners tutorial). And in only 21 minutes I gained all the knowledge needed to start a Firebase project with authentication and a database without a single line of backend code! The only thing I feel was left on the air is security. Is it really safe for us to do this kind of backend operations on the front end? Isn't our data vulnerable? But other than that, the practical information was all here. In a very short time without nonsense Edit: I do have backend experience of course, so maybe I'm not a 'beginner' but I don't think you should use something like firebase if you know nothing about the backend. And if you have used express with something like MongoDB Atlas you can follow all of this relatively easily

[@CharlesLales]

One more time, excellent. Concise and didactic, clear and efficient ;)

[@timhysniu]

Great and easy to follow guide. Thanks!

[@justinwyatt8]

One of the best dev videos I've seen

[@botondbertalan4992]

Thanks, you saved me a lo tof time. Although reading back the comments, I have 8 years of experience to follow along.

[@death-disco]

You know what video I’d love to see you make? A series on how you make your videos. I’m in an unrelated field of computer science (blockchain) and would love to learn from you as your videos are slick. :)

[@khalifarmili1256]

Thanks a lot. you have a nice efficient speaking rhythm. Every sentence that comes from your mouth is productive.

[@juancholuna265]

I could not understand anything, but the video was engaging. I watched every second. 👍

[@yuvrajsingh-gm6zk]

jeff was like "No chit- chat just on the point", I loved to be here!

[@liannvns]

Excellent summary for me. Thank you so much for this content.

[@lucianosazo2646]

Until yet, i don't saw the video, but i give you my like! thanks master!!!

[@pierrechavaroche7060]

Very good job and thank you very much Jeff!

[@Fireship]

Thank you Pierre!

[@uwspstar2008]

thanks for sharing these great videos!!!

[@MeghanStark]

Wow, thanks so much for doing a basic beginner's guide. I'm juuuuust knowledgeable enough to keep up. I'm migrating sites away from Business Catalyst and have to figure out new ways to build databases and secure zones after being able to do so with HTML, CSS, Liquid, and basic Javascript. It'll be a learning experience for sure!

[@bhfaught]

you are making me really really want to learn firebase! I've been using google-app-engine for hosting, but firebase seems really tempting with all the possibilities.

[@kavan1773]

This was a great beginners guide for someone like me who already has experience with AWS. I was able to get a great idea of what Firebase has to offer when compared to something like AWS. But for complete beginners it might be a bit too fast.

[@sebastiangudino9377]

But that's the point, isn't it? You should be learning firebase if you have zero backend experience. Since this is a modern service to abstract said backend away. If you don't know WHAT you are abstracting away you are going to have a hard time regardless of the tutorial you watch

[@MarioRomeroARG]

Great intro video for firebase! Thanks!

[@LeCrowTV]

Adding the missing `` on line 14 between the transition at 11:16 was really sneaky

[@philipcook6191]

Brilliantly done. Thank you.

[@MacKoslowski]

This was disgustingly informative, thanks

[@ljka]

Oh wow. I keep on hearing about Firebase and this is the first video i watch about Firebase. This thing looks promising and powerful! Haha. My team has plans of migrating a legacy code, Spring MVC backend and JSP frontend, to new tech stack i think frontend is either ReactJS or Vuejs. I would like to propose this Firebase to my boss for study. 😁 Thank you!

[@kld0093]

Holy crap this is so cool!!!!!! I definitely want to learn more about firebase!

[@TradingGuide]

Thank you! Excellent video to the point.

[@alexanderhughes2813]

Best video on this by far, thanks for it!

[@martynbirdem189]

kzbin.info/www/bejne/bGKbg2OCaLSlpKM Firebase project initialization. you can follow this channel.

[@amin1mrx965]

this video helped me a lot thank you. i got almost all the answers i wanted.

[@phembarl]

Well, that escalated quickly...

[@gillesbrouillette2497]

🤣🤣🤣🤣

[@fwef7445]

yep, garbage tutorial, not beginner friendly at all, must have got a lot of bots upvoting this

[@lachlanmason3918]

@@fwef7445 not begineer friendly. But for people like me who understand web basics and simple JavaScript, HTML and CSS this is incredibly helpful.

[@sanjeevdandin9350]

@@fwef7445 This tutorial is not garbage. Just it is not beginner friendly. For a guy like me who is working in JS for nearly 2 years this is on point. For me "talk is cheap, show me the code"

[@chuxmyk]

🤣🤣🤣

[@vanhoangnguyen6358]

It's so helpful and advanced. Thank you a lot. It's make change my mind how to quick build nice and save cost product.

[@ddean3732]

This was awesome!! Thanks so much...!

[@Fireship]

Thank you!

[@alanlal5625]

Your videos are super good...keep up the good work 👌👌👌

[@Fireship]

+Alan Will do, thanks for watching!

[@ManishSingh-zd5go]

Really a great session. Thanks a lot

[@c2d330a8]

Can we put this video on the firebase documentation main page? 😄 So good.

[@cseckler]

Great video! I'm not seeing the localStorage being updated after signInWithPopup(). Any idea what's going on there?

[@maritimesunderground5647]

Same here.

[@JackStepanyan]

Thank you very much for this video. Surprisingly today i had to create a simple app and im still very new to back end development. So i started to search some Rest databases or APIs and i found Firebase. I cant even explain how it was easy with just few clicks to create a real database. And now i found your awesome video. Please make more videos for beginners.

[@Fireship]

I remember feeling that way the first time also, and it's only getting better from here.

[@janphillipjuntado5340]

This is actually great content. Not beginner friendly of course but when you think about it, what kind of beginner would know about firebase anyway 🤔

[@dongyoungkim962]

wow fireship, you are amazing, i am really tempted to get your life time course lol

[@gatikgarg4007]

I'm Now Realising that firebase can give life to so many project ideas that i dumped due to backend involvement its simply crazy

[@eshetukebede4833]

Thank man ,u are simply the best.

[@rajayogan8884]

Finally.. you broke the 10-15 min limitation and shared a nice 20 minute vid.. Nice.. :)

[@Fireship]

Haha, it wasn't easy but I did it. I don't think I'll break the 10 min mark very often in the future.

[@alabifunmilayo4995]

I love it... fast and informative

[@shashankpandey1966]

Your channel is fully organized...

[@H1L1CH]

Thank you very much! Very helpful!

[@daniellaerachannel]

excellent

[@moechetham]

Excellent intro. Thank you

[@Kawaiiization]

I'd really appreciate an updated version.

[@n00bstude]

Great video, thanks!

[@IoTLearner]

I'm in love with firebase now...

[@luka6354]

Finally, Firebase with vanilla JS. Thanks!

[@prabhkiratclassiv-c1513]

I know half js and I am learning this video helped thanks 😊

[@HazemElsawy]

Your tuts cure my depression

[@nasserbaba9722]

ty bro for this video i got a lot from it

[@fabioambrozio7449]

Great explanation.. if you, after run "firebase init", get "Could not load ...", run "firebase login" before

[@lipslide101]

I'm amazed by this. Holy shit. As someone used to working with java and sql in the backend, this is crazy.

[@Fireship]

Haha, that's exactly how I felt too

[@lipslide101]

boi

[@radovansurlak7445]

Thanks a lot for the tut :)

[@jordankayinamura2030]

Daaaang the name "Firebasics", like that. good tutorials man

[@aseemlalfakawma5084]

Good tutorial, really taught me a lot about firebase, I wish you could type your code out, without that weird copy paste thing, and also indent code properly.

[@ThePandaGuitar]

Holy shit, why didn't this exist when I was busting my balls through late nights to build backends. Great tutorial that doesn't waste any time on fluff, thanks a lot man! Subbed because of this.

[@AdeelKhan1]

What were you using before Firebase? And what have you built using Firebase (so far)?

[@mattmarkus4868]

Is it meant for Angular or can you use react or vanilla js? I only ask because I see the angular logo everywhere. Thanks, this video looks professional and informative.

[@fernandonicolalde6332]

Excellent tutorial!

[@carlosenrique2317]

thanks, please add this video in the firebase main page :)

[@1lucasvan1]

dude i know it says beginner, but wow you move quickly

[@StarOnCheek]

you do realize that you can pause and rewind right?

[@jsonkody]

Amazing .. thx very much.

[@hassenmohammed3176]

It is excellent as always! I wonder if you can make a short tutorial on Ionic Firebase phone authentication that works for iOS, android and the web.

[@alexhum8662]

1:34 Project Creation on firebase console 2:15 Creating project locally 4:45 Firebase Authentication 7:25 Firebase Database

[@frankyu6922]

thanks! helped a lot!

[@JulianSloman]

Tour. Nice word for what this was!

[@swoorp]

Hey Jeff, which vs code theme do you use??? I wanna know, loved it!

[@tyrrelldavis9919]

When you run firebase init hosting , is it already pointing to a web app? Or do you have to initialize it as a web app in a separate app later? There's no way to have a web app with just ONE hosted project ?

[@tanavposwal]

Better than new firebase video

[@paretocompanylimited9611]

Firebase has been a great choice!