@@piagjabr I've made a screenshot for you on Pasteboard. pasteboard.co/I0WSec5.png If you click "Cloud Firestore" next to the Database label you'll get to see the two options. I hope it helps you out.
Anytime I see Brad course anywhere either on UA-cam or Udemy, I adjust my seat and get ready to learn new thing in a precise manner. Brad never disappoint. All his courses are AWESOME!!!. Thank You Brad.
Were you able to actually send an email with the contact form? It requires some advanced Javascript and a backend server.... It's so hard to implement the sending of an actual email thru a form.
I applaud your "mobile first" approach to development and design. Thank for coming up with an example that is used on a real website. Firebase is very compelling it's nice to see how to implement step by step.
#Everyone include the firebase database CDN link. Otherwise it will not work properly. Thank you so much @Traversy Media. This tutorial helps me a lot to complete one of my projects.
I admire you sir, it takes a long long time to find a tutorial that puts the configuration of the webapp in the .js file. The correct way to do it, first video i've watched that actually helped write to the db. Thank you.
This is the most easiest follow through video I have ever seen, you have an answer for everything one can think of! Just want to add that firebase gave me a warning to use specific CDN scripts eg firebase-database and firebase-app and not the generic firebase.js one.
Super thanks, just got interested in Firebase, didn't know it was part of my Google setup. This is a great example of "You don't always need a framework" and how the new JS has got da power.
Great video! Followed along and got the contact form on my website up and running in 45 minutes. This is one of the last things I wanted to complete before deploying my site. It is my first site and will be hosting using Github!
This means I don't have to use php for a contact forms, great. Firebase might also solve some of my hosting issues. I genuinely always seem to learn something new and valuable with these videos. Thanks!
You are amazing. After 15 years of software development in sql database I was not looking forward to firebase. We are currently developing in all platforms, iOS, android web and this was a great help. Will check your Udemy courses as well.
Excellent as always, thanks! Would be great to follow up on this project and do something with the form once submitted. For example, a common use case would be to send the submitted info to an email address. If Firebase can also send emails, then that would be a great continuation of the series. :)
Hi... sorry to pile on, but I would also like to see this series continue showing examples of how to send a notification email once a contact has been received by Firebase. Also, how we can pull data out of Firebase and, possibly, show the messages on an Admin page... Also, what is the proper way to secure this form once it is deployed? Should the Firebase RULES be set to only allow WRITES from the live web server IP address? Maybe, you could go into that in another video too?
Thanks brad, till now I was using only php contact form for all my website projects. And now I can use firbase which comes very handy. As usual your videos are so helpful.
Upvote this so traversy sees this. We need more firebase tuts. The majority of the tuts on YT and everywhere else are lacking or just plain deprecated by now
Yes, the firebase is not working at all. Because the version of Firebase used here is 4.3 while the current version is 8.2 . The error I am getting is: "Cannot read property 'ref' of undefined".
I don't get why at 13:57 he does : let newMessageRef = messagesRef.push(); newMessageRef.set({ ... }); Isn't .push() usually with something inside the () to push onto the target? So messagesRef.push(object) pushes object onto the firebase references messagesRef? What happens there when he pushes something to a variable with nothing inside the push, it's not on MDN JS docs - everything there shows that a argument is needed. And then after he does a .set, how does that relate to the above? Thanks for any answers, I really want to understand everything he teaches in this video.
For anyone whos watching this now and has this question - push() is a firebase method that gives an ID. newMessageRef then is a path to that ID and we call set() to save data to this path. You can take off .push() and see what happens to data when submitting to get better understanding
Had never heard of Firebase before this and am looking forward to trying my first crack at Javascript and Firebase. Love that your vids almost always translate to a fun and usefull project of my own. Thx bro.
You sir, are amazing, I love how chill you explain everything and love the fact that you add comments to everything, even the most obvious lines of code. keep up the good work !!
Collecting this information looks fairly straightforward. It might be a nice follow-up video to show how to connect to that same collection of data behind admin wall and view all of the submissions in a tabular format.
Always come here with a hope to learn something new and guess what i take a hell lot back from your videos. Thank you so much Mate. Appreciate all your effort. Cheers.
Nice guide. Could you put together a 2021 guide on the same topic? Seems like firebase has dramatically changed in how we communicate to their DB, sense the time of this original video.
I made it work with some changes. In the index.html, I instead used: In main.js, I Used the following code (changing the firebaseConfig to my own, of course) const firebaseConfig = { apiKey: "xxx", authDomain: "xxx", databaseURL: "xxx, projectId: "xxx", storageBucket: "xxx", messagingSenderId: "xxx", appId: "xxx", measurementId: "xxx" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); That worked for me.
This was unbelievably helpful and straightforward! I'm new to JS and Firebase, but I still managed to get a simple form linked to a database up on my final project page. Thank you. :)
Thank you Brad!!!! YOU are the coolest dude. I've always wanted to learn Firebase and never thought I would go this far in the learning process. NICE JOB!!
Thanks a lot, Brad! Always wanted to get to know the backend side of form submission. I will implement this on my online portfolio. Thanks Thanks Thanks again.
Men you're amazing !! I love your videos and what you want to share about your background and your experience !!! God bless you bro you and your family particularly your son !!!
Hey, its amazingBrad! Perfect thing, you just mentioned in the end about the authentication, bravo! tentimes yes! If you could built a blog based on Firebase, guess a lot of tough youtubers would be be impressed! And please Brad, find some free time to go further with that mobile first project :)
2023: import { initializeApp } from "firebase/app"; import { getDatabase, ref, push } from "firebase/database"; const firebaseConfig = { your config data databaseURL: "your database link" // signup for Realtime database through the site and paste the link here }; const app = initializeApp(firebaseConfig); const database = getDatabase(app); const yourDataTableRef= ref(database, "yourDataTableName") document.querySelector('form').addEventListener('submit', (e) => { const data = { your data } push(yourDataTableRef, data) alert(success) })
Thank you for making such a great tutorial, Brad. You make the javascript learning process much smoother.. Please make a vanilla javascript user registration form with firebase authentication.
I got mine to work with a few tweaks I found in the comments: *1.) Change JS script to below (in **_exactly_** this order):*
*2.) When editing rules in your Firebase database:* Click dropdown next to Database and click *Realtime Database* instead of _Cloud Firestore_ _Thank you to idlevandal69 and Dylan Thunn!_
Brad, absolutely brilliant. Thank you very much, I was not aware of Firebase so learnt something new again today. Need to learn more about js now. Farm West
Would really love to see an updated version of this ... Firebase has changed a lot.. and the script is all different and it doesn't work for me.. keeps saying.. const app = initializeApp(firebaseConfig); -- unable to find variable initializeapp
*Tip* : also add *reload* function to reload the page for flushing entered data setTimeout(function(){ document.querySelector('.sent').style.display = "none"; }, 3000); //reload page window.location.reload(); edit : not inside the timeout Function, Out side the function.
Hi, Brad. Is it possible to do a tutorial short video about "psd to html & css"? It would be nice to show different ways - either directly in photoshop or with app like brackets or something like that.
another question: how to make the contact app available offline like a phone contact app, in order to access any contact and modify it in offline mode?
thanks a lot for your help..i was being in trouble and fortunately i found u as a saver of my life..I was actually grateful to u!! by the way....Hopefully you will make more and more vid like this..thanks a gain
in the file you're having troucble with, write this: import firebase from 'firebase/app'; or import {firebase} from 'firebase/app'; it worked for me, good luck
Hi Brad, Great tutorial as always. Thanks.. How to prevent bad guys from using my credentials & pushing data to firebase, since credentials are visible to every one.?
You would normally add authentication to your web page when using anything that will have the ability to submit to Firebase. You can add rules to your database in Firebase to only allow items to be pushed if authenticated. Having the name of the project/databaseUrl etc. is useless if there are proper rules set up.
Great tutorial, but one question - at 7:48 you declared a function 'submitForm' with a parameter of 'e', but when you called it in 'addEventListener' you didn't pass in that parameter, is this a mistake or I am misunderstanding Javascript?
Despite the difference between current firebase environment and the one used in this video, there is a crucial question not being answered: what happens if someone tries to abuse your contact form and submit it millions of time? Since you are using database directly, you will have no control on that and you need to be careful with billing and set up threshold alerts (at least). To solve this issue you need to set up a middle layer, it could be an express node server and use it to filter out all possible misuse.
Dude your videos are awesome! one of the best tuts maker out there!, it would be great if you could ,maybe make one about notifications emails, like how to send all the form data from Firebase or any other noSql - to an actual users email address/s, for some reason this topic is totally NUll online (
excellent bro..i have a doubt .. .when i input the form its stored in realtime databases..Good..but i want a immediate email to my Mail ID it is possible?.please help me...Thanks alot
11:50 Whenever I get to this prompt. Firebase makes me use a 2nd named container. "Give your project a nickname" So essentially it has 2 containers whenever you enable web app on firebase? Been trying to figure out how to work with just the one container. Help?
Firebase has changed, make sure when you go to Database in Firebase, scroll down and select the 'Realtime Database' otherwise it won't work.
thanks dude, i'm searching for your comments. it helped me :)
Thanks
Thanks man!!!
I wasn't sure why it wasn't working for me, then I saw your comment and it worked instantly.
@@MikevanKuik Don't understand what to do !! Go to the Firebase Database docs and ??
@@piagjabr
I've made a screenshot for you on Pasteboard.
pasteboard.co/I0WSec5.png
If you click "Cloud Firestore" next to the Database label you'll get to see the two options.
I hope it helps you out.
Anytime I see Brad course anywhere either on UA-cam or Udemy, I adjust my seat and get ready to learn new thing in a precise manner. Brad never disappoint. All his courses are AWESOME!!!. Thank You Brad.
Thanks! You help me a lot. I bought your course (bootstrap) in Udemy and now I just finish my contact form on my portfolio.
You're an amazing teacher!
Were you able to actually send an email with the contact form? It requires some advanced Javascript and a backend server.... It's so hard to implement the sending of an actual email thru a form.
I applaud your "mobile first" approach to development and design. Thank for coming up with an example that is used on a real website. Firebase is very compelling it's nice to see how to implement step by step.
#Everyone include the firebase database CDN link. Otherwise it will not work properly.
Thank you so much @Traversy Media. This tutorial helps me a lot to complete one of my projects.
give the link
Your videos are phenomenal. You have 156k subs and FCC has 200k. You're a one man show and you almost have the same impact as FCC
You are the man Brad. I've been following your videos for about a year now and I have yet to find someone who teaches as well as you do.
I admire you sir, it takes a long long time to find a tutorial that puts the configuration of the webapp in the .js file. The correct way to do it, first video i've watched that actually helped write to the db. Thank you.
This is the most easiest follow through video I have ever seen, you have an answer for everything one can think of! Just want to add that firebase gave me a warning to use specific CDN scripts eg firebase-database and firebase-app and not the generic firebase.js one.
Super thanks, just got interested in Firebase, didn't know it was part of my Google setup. This is a great example of "You don't always need a framework" and how the new JS has got da power.
I loved that calm attitude with which you taught, you're the man
Great video! Followed along and got the contact form on my website up and running in 45 minutes. This is one of the last things I wanted to complete before deploying my site. It is my first site and will be hosting using Github!
After 3 years but it's never TOO LATE
Thanks A Lot Bro,
Perfect Tutorial :)
This means I don't have to use php for a contact forms, great. Firebase might also solve some of my hosting issues.
I genuinely always seem to learn something new and valuable with these videos.
Thanks!
i spent 2 nights trying to find a video on this i dont know how i missed yours ! thanks
I just released it hours ago :)
You are amazing. After 15 years of software development in sql database I was not looking forward to firebase. We are currently developing in all platforms, iOS, android web and this was a great help. Will check your Udemy courses as well.
thank you verrry much i have been searching for comment system from weeks at last found yours and it is working perfectly.
Excellent as always, thanks! Would be great to follow up on this project and do something with the form once submitted. For example, a common use case would be to send the submitted info to an email address. If Firebase can also send emails, then that would be a great continuation of the series. :)
John Buchmann was gonna write the exact same thing
John Buchmann me too
Hi... sorry to pile on, but I would also like to see this series continue showing examples of how to send a notification email once a contact has been received by Firebase. Also, how we can pull data out of Firebase and, possibly, show the messages on an Admin page...
Also, what is the proper way to secure this form once it is deployed? Should the Firebase RULES be set to only allow WRITES from the live web server IP address? Maybe, you could go into that in another video too?
Agreed
Firebase is now listed on zapier. You can get zapier to deliver the message to an email, an api or any platform that you wish.
Thanks Traversy..i have learnt alot of front -end development from you. You are the greatest of them all
Thanks brad, till now I was using only php contact form for all my website projects. And now I can use firbase which comes very handy. As usual your videos are so helpful.
I'm just catching up with all your content brad, you've changed your life around and I am so happy for you. All the best man.
Sir, please make a 2019 video on the same topic and host, update many other things on firebase?
Agreed. Firebase has changed and I'm super confused.
This is where some of my best apps are
Upvote this so traversy sees this. We need more firebase tuts.
The majority of the tuts on YT and everywhere else are lacking or just plain deprecated by now
@@FordExplorer-rm6ew YES I need updated tutorials bc everyone's are old and I'm so confused
Yes, the firebase is not working at all. Because the version of Firebase used here is 4.3 while the current version is 8.2 . The error I am getting is: "Cannot read property 'ref' of undefined".
@@MotM200 bro Iliterally got firebase.database is not a function...
Brad just finished your mean stack app and plan to study firebase ,thanks brad
I don't get why at 13:57 he does :
let newMessageRef = messagesRef.push();
newMessageRef.set({
...
});
Isn't .push() usually with something inside the () to push onto the target? So messagesRef.push(object) pushes object onto the firebase references messagesRef? What happens there when he pushes something to a variable with nothing inside the push, it's not on MDN JS docs - everything there shows that a argument is needed.
And then after he does a .set, how does that relate to the above? Thanks for any answers, I really want to understand everything he teaches in this video.
i have the same questions , i guess you could do it either way but .push({object}) is the preferable way, at least according to the docs
For anyone whos watching this now and has this question - push() is a firebase method that gives an ID. newMessageRef then is a path to that ID and we call set() to save data to this path. You can take off .push() and see what happens to data when submitting to get better understanding
Had never heard of Firebase before this and am looking forward to trying my first crack at Javascript and Firebase. Love that your vids almost always translate to a fun and usefull project of my own. Thx bro.
I was thinking of learning firebase, and voila I got tutorial by brad. Thnx Brad. waiting for the authentication part
You sir, are amazing, I love how chill you explain everything and love the fact that you add comments to everything, even the most obvious lines of code. keep up the good work !!
Collecting this information looks fairly straightforward. It might be a nice follow-up video to show how to connect to that same collection of data behind admin wall and view all of the submissions in a tabular format.
very clever use of getInputVal() function to capture values by passing an id... Thank you Brad!
"hey what's going on guys, so a few days ago, or I don't know, maybe it was even yesterday..."
how can you not love this guy
Firebase is so great, thanks Brad. Please do more advanced example with firebase, like file upload and notification
And send email notification too. ^^
a tip: if you play Brad's videos at 1.25 speed it is better and sounds more energetic
Always come here with a hope to learn something new and guess what i take a hell lot back from your videos. Thank you so much Mate. Appreciate all your effort. Cheers.
Is there a way to receive the information from the contact form and send it to an email address using the real time database and without using node?
Nice guide. Could you put together a 2021 guide on the same topic? Seems like firebase has dramatically changed in how we communicate to their DB, sense the time of this original video.
I made it work with some changes.
In the index.html, I instead used:
In main.js, I Used the following code (changing the firebaseConfig to my own, of course)
const firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx",
databaseURL: "xxx,
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx",
appId: "xxx",
measurementId: "xxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
That worked for me.
@@Didrik147 this did the trick thank you!
I have only heard about firebase without using.
This short video makes me know idea about firebase thanks for explanation
My Guy! Great, great tutorial. Finally, some pure vanilla javascript. Awesome!!!!
This was unbelievably helpful and straightforward! I'm new to JS and Firebase, but I still managed to get a simple form linked to a database up on my final project page. Thank you. :)
Thank you Brad!!!! YOU are the coolest dude. I've always wanted to learn Firebase and never thought I would go this far in the learning process. NICE JOB!!
Really nicely explained, more of firebase would be appreciated.
Thanks a lot, Brad! Always wanted to get to know the backend side of form submission. I will implement this on my online portfolio. Thanks Thanks Thanks again.
Men you're amazing !! I love your videos and what you want to share about your background and your experience !!! God bless you bro you and your family particularly your son !!!
Hey, its amazingBrad! Perfect thing, you just mentioned in the end about the authentication, bravo! tentimes yes! If you could built a blog based on Firebase, guess a lot of tough youtubers would be be impressed! And please Brad, find some free time to go further with that mobile first project :)
Brad is the best in my own ranking
2023:
import { initializeApp } from "firebase/app";
import { getDatabase, ref, push } from "firebase/database";
const firebaseConfig = {
your config data
databaseURL: "your database link" // signup for Realtime database through the site and paste the link here
};
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
const yourDataTableRef= ref(database, "yourDataTableName")
document.querySelector('form').addEventListener('submit', (e) => {
const data = { your data }
push(yourDataTableRef, data)
alert(success)
})
Thank you for making such a great tutorial, Brad.
You make the javascript learning process much smoother..
Please make a vanilla javascript user registration form with firebase authentication.
Great tutorial Traversy. You can make a great trainer.
Take love, sir. You are a great teacher❤❤❤❤
requesting to make the same video again in 2020.. a lot has changed
This is one of the best tutorials i´ve found, thank you!
Brother no words to thank you
I got mine to work with a few tweaks I found in the comments:
*1.) Change JS script to below (in **_exactly_** this order):*
*2.) When editing rules in your Firebase database:* Click dropdown next to Database and click *Realtime Database* instead of _Cloud Firestore_
_Thank you to idlevandal69 and Dylan Thunn!_
thanks @louise egea,your a life saver
Esta respuesta si me sirvio, gracias Louise
nice one louise
Brad,
absolutely brilliant. Thank you very much, I was not aware of Firebase so learnt something new again today. Need to learn more about js now.
Farm West
just finished this course. Taught me new things especially the javascript one! :))
this tutorail is really good also waitng for tutorail on other modules of firebase web such as authentication, Cloud firestore.... etc
still found this useful after 4 years.
make a playlist on firebase including reading/display data and deleting data. excellent tutorial
Would really love to see an updated version of this ... Firebase has changed a lot.. and the script is all different and it doesn't work for me.. keeps saying.. const app = initializeApp(firebaseConfig); -- unable to find variable initializeapp
Your tutorials are very informative.
*Tip* : also add *reload* function to reload the page for flushing entered data
setTimeout(function(){
document.querySelector('.sent').style.display = "none";
}, 3000);
//reload page
window.location.reload();
edit : not inside the timeout Function, Out side the function.
Hi, Brad. Is it possible to do a tutorial short video about "psd to html & css"? It would be nice to show different ways - either directly in photoshop or with app like brackets or something like that.
Hey.. every time y push the submit button the page reloads and nothing happens .. I checked the script and everything is like in the video.
Thank you Brad, your video helped me a lot! I will share it to others, for sure!
As always, your video is very helpful. I always look for your videos when learning a new language or platform. Thank you. m.j.
another question: how to make the contact app available offline like a phone contact app, in order to access any contact and modify it in offline mode?
thanks a lot for your help..i was being in trouble and fortunately i found u as a saver of my life..I was actually grateful to u!!
by the way....Hopefully you will make more and more vid like this..thanks a gain
hi at 10:48 , for the var part I encounter problem that my value is declare but never read. could anyone help me with this?
Great explanation. It was easy to expand this to fit my contact form. Thank you!
That was awesome. Plz do a CRASH COURSE video on FIREBASE.
Brilliant job right there Brad, well explained thanks
How to read this firbase contactform database, have any video about this..
Thank you. Its awesome to start with so crystal clear explanaiton.
I have a problem !!!!
help plz !!
Uncaught TypeError: firebase.database is not a function
in the file you're having troucble with, write this:
import firebase from 'firebase/app';
or
import {firebase} from 'firebase/app';
it worked for me, good luck
Add that under the other firebase cdn in index.html
Hi Brad, Great tutorial as always. Thanks..
How to prevent bad guys from using my credentials & pushing data to firebase, since credentials are visible to every one.?
Black and White good quation
Interested in this one
You don't use the credentials on the front, you make a call to your server and your server calls firebase. Never store any information on the front.
You would normally add authentication to your web page when using anything that will have the ability to submit to Firebase. You can add rules to your database in Firebase to only allow items to be pushed if authenticated. Having the name of the project/databaseUrl etc. is useless if there are proper rules set up.
Dear Brad, Thanks a ton for the nice videos and educative content and sharing your brilliant knowledge! God bless you abundantly!
Great tutorial, but one question - at 7:48 you declared a function 'submitForm' with a parameter of 'e', but when you called it in 'addEventListener' you didn't pass in that parameter, is this a mistake or I am misunderstanding Javascript?
I understand that, but in the method call he didn't pass that 'e'
I got this error: " Uncaught TypeError: firebase.database is not a function "
Try to add this:
My Firebase version is 7.7.0.
change (config) for (firebaseConfig), works for me. Line 11
I got a : Uncaught TypeError : addEventListener
Thank you. it worked!
Thank you so much for your help man. I loved the video!
good explanation, if make one more for crun that will be great for us
I'm getting "Cannot read property 'push' of undefined" error, somebody please help me with this. Please reply
Very helpful thank you mr. Brad 😊
Despite the difference between current firebase environment and the one used in this video, there is a crucial question not being answered: what happens if someone tries to abuse your contact form and submit it millions of time? Since you are using database directly, you will have no control on that and you need to be careful with billing and set up threshold alerts (at least). To solve this issue you need to set up a middle layer, it could be an express node server and use it to filter out all possible misuse.
Great. Very impressive. Have been looking for something like this.
This was super super useful! Thanks! Great work Brad!
Keep up the good work! Love from morocco ♡
Is there a way to get an email when the contact form is submitted?
Dude your videos are awesome! one of the best tuts maker out there!, it would be great if you could ,maybe make one about notifications emails, like how to send all the form data from Firebase or any other noSql - to an actual users email address/s, for some reason this topic is totally NUll online (
excellent bro..i have a doubt .. .when i input the form its stored in realtime databases..Good..but i want a immediate email to my Mail ID it is possible?.please help me...Thanks alot
Really good stuff Brad, keep them coming.
Man, you are the best! As always, thanks for what you do! I would love to see some more vanilla JS tutorials.
Excellent, how can we store the value from the drop-down box to firebase?
8:17 I'm getting an uncaught typeError: for 'addEventLister' of null
forgot to type this in my index.html below h3 "Email us"
Hi Brad, thanks a lot for a great video as always. Hope this can be a serie of videos, for small websites with firebase. Br, Jacob/ Sweden
I am not getting an error in the console but my data is not saving in the database. any idea?
Great Brad, as always very informative and
straight to the point ! 😀
but how do you receive this data from firebase to your mailbox in plain text ...? I dont see the point if not ...
search for petsapp in you tube that will explain how to get the data from firebase ...
11:50
Whenever I get to this prompt.
Firebase makes me use a 2nd named container.
"Give your project a nickname"
So essentially it has 2 containers whenever you enable web app on firebase?
Been trying to figure out how to work with just the one container.
Help?
Seriously, you're a blessing👏. i just got your udemy node course
Uncaught TypeError: firebase.database is not a function
this error show on my console
heey, were you able to solve it?
Thank you Brad. Please make a full Udemy course on Javascript with some projects.