google is changing firebase so often it's hard to even know where to begin, so many different releases may be a great milestone for the team, but every new feature per release is making things less user friendly and more complicated. firebase appeared to be a nice entry point into some deeper backend-as-a-service type of project for me, but these videos don't explain enough.
Hey! This SDK release was one of the biggest feature requests we've ever had in the history of Firebase: reducing the library size. So I promise, we're listening to users and trying to make an impact where its most wanted. As far as more advanced content goes, stay tuned. We have a lot planned for 2022. What kind of tutorials are you looking for?
Totally agree, it took me 3 days to figure out which tutorial to even watch because every single one is different and I have been so confused, if it wasn't for my need to learn something google related I would have stopped searching
@@sunimod1895 can you send the links for the videos you watched, I'm developing a Website for my college project and am unable to connect it to firebase. I'm getting more confused with each video I watch on firebase.Thanks
@@sunimod1895 There are a lot of videos and docs for it but it still is confusing and I'm stuck on this since last week, no progress till now. I would be great if you could share some resources related on it.
@@aditipandey1769 The first path in the path variable needs to be the NPM path. Opening the Node.js command prompt I found that the ng command worked there. I dug into the shortcut and found that it references a command to ensure the first Path variable is NPM. To Fix: Right Clicked on My Computer (windows) Selected Advanced System Settings Clicked "Environment Variables" Under "Path" variable, made the FIRST value listed %AppData% pm Once I did that I was able to close powershell and reopen and all worked.
If you ever update this video, please include a section on how to obtain the Firebase project configuration for your specific project. This is crucial information that this video is completely missing.
I just asked ChatGPT, and I got the configuration, for people who don't know how to do it, just add an app in your firebase project. I think it's because the UI, so the information it's unclear, especially for newbies.
The project configuration is obtained after going onto settings for the project and finding the part called "SDK setup and configuration", however I'm also lost atm with some of the later steps, and I agree that some of this isn't specific enough for beginners
I am getting: index.html:1 Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../". in console after inspecting. Please help!
Why for the love of god cant I find any tutorial anywhere that shows going from nothing to having a running application with user authentication. I have learned all the fundamentals of web development and have been stuck for literal months trying to just get firebase authentication working. I'm beginning to lose my sanity. I must have gone through this tutorial alone 5 separate times now trying to just get authentication started and I keep feeling like vital information is just being glazed over or omitted entirely. How does what was created in this tutorial get implemented into an application?
Are you using vanilla javascript? I found out in the worst way that you can't make firebase work in a decent way with vanilla javascript I wish they stated it in a more obvious way somewhere so I didn't lose time finding this out after failing 2000 times Anyway, I ahve started learning react just to make this crap work
@@irismiranda3650ohh damn .. actually I am a beginner and I have actually scraped the entire web to make firebase work in vanilla js .. since I don't know any frameworks .. and I always get Post 400 errors also the tutorials on net are not helpful they are either a year old or more and the version of firebase updates so they re of no use
It was all going fine until step 2....not really a getting started video, as don't really know what to do next. and the baseline code used to start is also not clear.
I believe when you copy the code for the SDK setup, you can select the CDN radio button to use the browser module URLs. This would be in the project settings.
So this gets us a testing environment for a webapp on Firebase 9. Where does one go to find advice on "deploying" the webapp to the cloud? Also, why aren't we using the Firebase Emulator for testing? This excellent video certainly gets us started, but it's taken us some way from the environment we might have got familiar with in Firebase 8
I copied his code exactly in a new project, and received this in the console: "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec." Does anyone know what I'm doing wrong? If I change the js file to mjs, it doesn't give me the MIME error anymore, but the HTML file can't find the functions in the mjs file... have not been able to get even the example to work.
@@nihaalprasad7049 I tried it cant get the html console.log("no user") printed so main.js is not being linked as src/index.html I did as well src="../dist/main.js" as the file path but still nothing as well
Can someone help me ? Failed to load resource: the server responded with a status of 404 (Not Found) :63342/Website/node_modules/firebase/compat/:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.
How do we sole this localhost/:1 Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".
Thank you for the kind words, Fuad! We're glad you enjoyed the video 😎 Be sure to check out the links in the description for more updates, tips and tutorials!
I want to add firebase to my react project. But it is showing can't resolve firebase in documents/my-react-app/src... Plzz help me with this.Trying to resolve it since 3 days!
Where do I get the play list? Where do I get sample files that I can build up on? Need some help. Not easy following the third video without some idea of what needs to be done physically. Would have liked the full HTML page.
@@hinrichfspruyt you need to set up webpack and include bundle.js to the index.html for this. Not the actual src/index.js. also you need to keep webpack running in the background for this.
serve dist/ and serve src/ and the location of index.html -> It takes twice time more than the video length which file is where and which folder to serve. If jumping from one point to another, this distinction could have been made clearer. Thanks for the video by the way. It is fruitful in the philosophy behind.
Hey! I promise, nothing was pasted (other than the confi object, which should be!). I speed up the typing to keep the video time as short as I can. What part did you have trouble getting to work?
dude i try cdn with no npm but while db working in script on the index.html when in the end i link app.js script db say is not defined any help anyone?
After close to 10 months trying to get authentication to work, I think I finally cracked it but I am not even sure if it's working but the console reports "No user" so that was satisfying to see, before then it was a mess of errors in the console and had no idea on what to do
I wish this actually showed how to find a user verse showing the default. I am getting that but not actually access to the Auth Users of Firestore Data.
Hi thanks for the video, I am getting this error " FirebaseError: Firebase: Error (auth/invalid-value-(email),-starting-an-object-on-a-scalar-field-invalid-value-(password),-starting-an-object-on-a-scalar-field). " but I cannot find the meaning from the codes. Can you please point me in the right direction? I am using the new auth SignInWithEmailAndPassword
@ 2.03, the index.html file currently lives in the web folder/directory of the Flutter project. Where do I include this Firebase in the Flutter project? Create a new index.js in the same directory, and include the and rest of the configuration as shown in the video? Kindly demystify. I'm extending my already working Flutter androis-iOS App already wired to Firebase Firestore database. I want to extend this to web. Thank you.
I have a simple javascript mortgage calculator I want to query via api for my Manychat Chatbot, and so far doing something so simple has wasted like 2 days trying to figure out the complexities of just hosting the backend. Jesus! This is like being told I have to learn the physics of quantum entanglement on 13 dimensions just to start a car. Why the hell is this so difficult? I really need a cli envirnoment installed on my Mac to host a damn Javascript that responds to a GET request? Give me a break, there has to be an easier way.
I'm dying to know what font/extension you used!! I love that "user" is differentiated. I found Fira Code, but that doesn't give me the different look for "user" and looks a bit different in the font anyways.
1:48 Here, in order to communicate with the server, you write the index.js file in the public folder and write the configuration code, doesn't this cause a security problem? I think it can.
Could firebase get any more confusing? They started out with simple adding js libraries in header files. Now you need to go through all this garbage with node, cli tools etc. all for compatibility with vue, angular and the endless army of javascript frameworks vying for supremacy in an increasingly diluted field. Frustrating rubbish.
I have build error: Uncaught TypeError: a.auth is not a function but dev-build work but with another error: FirebaseError: Firebase: Error (auth/argument-error). Firebase is terrible
3 months and no progress :) This guys didn't show how he set up everything before explaining how to do in visual code.This will make a big confusion and lead to a lot of problems which is no clue of explanation in this video.
Appreciate the video but is there a newer version of this? It seems Firebase hasn't changed, not sure how but it doesn't work like it does on the video.
I tried to connect Firestore in my Angular 18 project but failed. If anyone has set it up successfully, could you please share your steps or any advice on how to do it? it run to problem with standalone = true issue and without ngModule.
Same here! I was going to start learning Firebase but since version 9.0 came i cant find any good tutorials to help me learn. Even their official samples haven't been updated yet! Am trying since the last 3 days to createUserWithEmailAndPassword but its not working. It really suckss. Hope they make some tutorials regarding 9.0.
VERY FRUSTRATING that there is no mention at all of WHAT VERSION of firebase this relates to. There even IS mention of "our older library." Well... older compared to what? THIS video will certainly be related to some "older library" someday in the future... maybe even now... We have no way of knowing.
google is changing firebase so often it's hard to even know where to begin, so many different releases may be a great milestone for the team, but every new feature per release is making things less user friendly and more complicated. firebase appeared to be a nice entry point into some deeper backend-as-a-service type of project for me, but these videos don't explain enough.
Hey! This SDK release was one of the biggest feature requests we've ever had in the history of Firebase: reducing the library size. So I promise, we're listening to users and trying to make an impact where its most wanted.
As far as more advanced content goes, stay tuned. We have a lot planned for 2022. What kind of tutorials are you looking for?
Totally agree, it took me 3 days to figure out which tutorial to even watch because every single one is different and I have been so confused, if it wasn't for my need to learn something google related I would have stopped searching
@@sunimod1895 can you send the links for the videos you watched, I'm developing a Website for my college project and am unable to connect it to firebase. I'm getting more confused with each video I watch on firebase.Thanks
@@dipanshuraj8565 if you look up firebase 2022 (I believe it is anything firebase version 9) you should fine stuff easily
@@sunimod1895 There are a lot of videos and docs for it but it still is confusing and I'm stuck on this since last week, no progress till now. I would be great if you could share some resources related on it.
06:07
For people who had this issue too: bash: serve: command not found
You have to install it first like this: npm install -g serve
Respect
Brother still it's not working
Thanks.
same not working, please help
@@aditipandey1769 The first path in the path variable needs to be the NPM path. Opening the Node.js command prompt I found that the ng command worked there. I dug into the shortcut and found that it references a command to ensure the first Path variable is NPM. To Fix:
Right Clicked on My Computer (windows)
Selected Advanced System Settings
Clicked "Environment Variables"
Under "Path" variable, made the FIRST value listed %AppData%
pm
Once I did that I was able to close powershell and reopen and all worked.
If you ever update this video, please include a section on how to obtain the Firebase project configuration for your specific project. This is crucial information that this video is completely missing.
this is where I lost, can someone please tell me how to do it?
I just asked ChatGPT, and I got the configuration, for people who don't know how to do it, just add an app in your firebase project.
I think it's because the UI, so the information it's unclear, especially for newbies.
The project configuration is obtained after going onto settings for the project and finding the part called "SDK setup and configuration", however I'm also lost atm with some of the later steps, and I agree that some of this isn't specific enough for beginners
Go to the webapp settings in your project in firebase ....then scroll dwon then click on config ...simply copy paste the code given there
I am getting: index.html:1 Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../". in console after inspecting. Please help!
Why for the love of god cant I find any tutorial anywhere that shows going from nothing to having a running application with user authentication. I have learned all the fundamentals of web development and have been stuck for literal months trying to just get firebase authentication working. I'm beginning to lose my sanity. I must have gone through this tutorial alone 5 separate times now trying to just get authentication started and I keep feeling like vital information is just being glazed over or omitted entirely. How does what was created in this tutorial get implemented into an application?
i can help you get started, i use it on web
I'm having the exact same problem 😢
Are you using vanilla javascript? I found out in the worst way that you can't make firebase work in a decent way with vanilla javascript
I wish they stated it in a more obvious way somewhere so I didn't lose time finding this out after failing 2000 times
Anyway, I ahve started learning react just to make this crap work
@@irismiranda3650ohh damn .. actually I am a beginner and I have actually scraped the entire web to make firebase work in vanilla js .. since I don't know any frameworks .. and I always get Post 400 errors also the tutorials on net are not helpful they are either a year old or more and the version of firebase updates so they re of no use
Ask chatgpt to guide you step by step, it will even write the code for you, it's much better than these tutorials.
What is your font and theme? It's so good.
It was all going fine until step 2....not really a getting started video, as don't really know what to do next. and the baseline code used to start is also not clear.
how do i get the browser module path, he skips right over that as if its normal?!
Can you provide a Fundamentals video for all of Firebase?
@@ToddKerpelmanCorp You're so cool!
where did he get those urls at 5:35
I believe when you copy the code for the SDK setup, you can select the CDN radio button to use the browser module URLs. This would be in the project settings.
Thank you! I found a need for this because my JS masterclass is 3yr old and it seemed that the fire base integration method he showed no longer works.
Covered way more details than I expected! Nice to see such packed content, free of skippable sections. :)
So this gets us a testing environment for a webapp on Firebase 9. Where does one go to find advice on "deploying" the webapp to the cloud? Also, why aren't we using the Firebase Emulator for testing? This excellent video certainly gets us started, but it's taken us some way from the environment we might have got familiar with in Firebase 8
Great video, but how do you deploy it? It should ideally end with the site being available at a public URL somehow.
@Envens ❤️
I copied his code exactly in a new project, and received this in the console:
"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec."
Does anyone know what I'm doing wrong?
If I change the js file to mjs, it doesn't give me the MIME error anymore, but the HTML file can't find the functions in the mjs file... have not been able to get even the example to work.
add type="module" to your script tag, solved for me
Same problem. Can't resolve it. So difficult to find support on this issue. Can anybody help?
@@nihaalprasad7049 Didn't help. :(
@@nihaalprasad7049 I tried it cant get the html console.log("no user") printed so main.js is not being linked as src/index.html I did as well src="../dist/main.js" as the file path but still nothing as well
Good video but I am trying to code along to get my version working, the camera panning and fast forwarding really doesnt help with this.
Wish I would have started my Firebase research with this video. That was the best 11 mins I have spent in days. Well done!
Hi. Big request .Please tell or make a video on how to connect with database already in firebase and query on it and get the results
You're a very patient teacher. Thanks!
god damn it this video should be posted as the FIRST ONE in your channel!
Thank you very much bro for the smoking tutorial
Thank for sharing
Im getting this error
The term 'serve' is not recognized as the name of a cmdlet
what can i do
great you're back!!!
even after Importing the authentication package I am getting error in browser getAuth() not defined. Can someone help please?
I feel that version 9 is harder to use than version 8. and I have to downgrade back to version 8.10.0
okay..where is the code that Peter is referring to? b/c I do not see you typing that code in this video
Can someone help me ?
Failed to load resource: the server responded with a status of 404 (Not Found)
:63342/Website/node_modules/firebase/compat/:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.
Yeah it's like that for me, I tried adding "type": "module" to the package json with the same outcome
Angular and firebase please.
I want to deploy my project, but I'm I supposed to move the src folder and the node-modules into dist?
sorry , was looking at your example and I am stuck at the onAuthStateChanged part , how do you do that ?
I created a project and access the firestore databse page it stuck on loading and give me the information strict-origin-when-cross-origin. Why?
I couldn't find the fundamentals playlist. Can you send a link?
This should be my first tutorial, thx from Chile!
please provide link to playlist , if a video is from playlist. Ty for such a packed content.
Being trying to use fire base service and its very complicated, i watched about 10 videos now, including yours, yet nothing is working
How do we sole this
localhost/:1 Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".
Same problem. Please advise.
7:14
@@HenriqueOliveira-wg9ht Thanks, I started using ReactJS, it was easier to implement it then.
Thank you Man! You made it so easy to understand!
Thank you for the kind words, Fuad! We're glad you enjoyed the video 😎
Be sure to check out the links in the description for more updates, tips and tutorials!
I want to add firebase to my react project. But it is showing can't resolve firebase in documents/my-react-app/src...
Plzz help me with this.Trying to resolve it since 3 days!
Where do I get the play list? Where do I get sample files that I can build up on? Need some help. Not easy following the third video without some idea of what needs to be done physically. Would have liked the full HTML page.
excellent, thanks and also very happy about version 9!!
Great to hear!
Cannot use import statement outside a module
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
Make sure the script is set as type=”module”
@@ianthethird420 Still doesn't work. "Failed to load module script..."
@@lightgridptyltd5032 It also says something about a MIME type
@@bke629 Yes. I have no idea where to get support for this. Stackoverflow has nothing on it.
@@hinrichfspruyt you need to set up webpack and include bundle.js to the index.html for this. Not the actual src/index.js. also you need to keep webpack running in the background for this.
npm bundles dont work for me. Seems like browsr modules is the only way to go for now!
serve dist/ and serve src/ and the location of index.html -> It takes twice time more than the video length which file is where and which folder to serve. If jumping from one point to another, this distinction could have been made clearer. Thanks for the video by the way. It is fruitful in the philosophy behind.
This does not work........ You had a bunch of code randomly paste itself in right away. Not mine.... So much time.
Hey! I promise, nothing was pasted (other than the confi object, which should be!). I speed up the typing to keep the video time as short as I can. What part did you have trouble getting to work?
dude i try cdn with no npm but while db working in script on the index.html when in the end i link app.js script db say is not defined any help anyone?
"serve dist/" doesn't work for me. I had to run "npx server -s dist".
Amazing tutorial, very nice teaching, thanks
how did u get it to work vecause im currently struggling to even install the webpack files he spoke abt in the video
bit late to the party, but do you mind sharing your font/color schemes that u use for VSCode?
After close to 10 months trying to get authentication to work, I think I finally cracked it but I am not even sure if it's working but the console reports "No user" so that was satisfying to see, before then it was a mess of errors in the console and had no idea on what to do
i feel your pain, Kevin😂😂😂😂
That was Awesome!!! such completed fundamentals wow. ❤❤
Glad you liked it!!
Do you use React?
I wish this actually showed how to find a user verse showing the default. I am getting that but not actually access to the Auth Users of Firestore Data.
not a fan of this new structure and I can't seem to get my authentication working with Ver. 8 any more
Very high-quality content. Ty.
I know you! Good to "see" you again. Thanks for the info.
Bro at around 6:10 you use the serve /src command to open up a server. Is serve the default firebase command to do that?
Does anybody know?
one for using firebase on cross-platform frameworks like react native and flutter would be nice
True! I really wish Firebase V9 functional programming features could be implemented in Flutter and not the old OOP approach.
need an updated version of this and please do it in windows
V9 is gonna be sick 😏
Hi thanks for the video, I am getting this error " FirebaseError: Firebase: Error (auth/invalid-value-(email),-starting-an-object-on-a-scalar-field-invalid-value-(password),-starting-an-object-on-a-scalar-field). " but I cannot find the meaning from the codes. Can you please point me in the right direction? I am using the new auth SignInWithEmailAndPassword
What font is that??? How do you get that "not equal to" symbol?
That might be Fira Code. And that not equal to sign in (and many others) are activated by enabling ligatures. You can find the setting in preferences.
@@mikestanley18 I don't think that is Fira Code. The f looks totally different.
Its Dank Mono
@ 2.03, the index.html file currently lives in the web folder/directory of the Flutter project. Where do I include this Firebase in the Flutter project? Create a new index.js in the same directory, and include the and rest of the configuration as shown in the video? Kindly demystify. I'm extending my already working Flutter androis-iOS App already wired to Firebase Firestore database. I want to extend this to web. Thank you.
Hi..did you able to connect firebase web to your old Android/ Ios app ? Please help me fix too.
has anyone come across an error related to top level await?
Thank you sir for the good walk through,
One question ,
how does this work with parcel bundler? thank you in advance
Do you use react? Bundler is automatic there?
I have a simple javascript mortgage calculator I want to query via api for my Manychat Chatbot, and so far doing something so simple has wasted like 2 days trying to figure out the complexities of just hosting the backend. Jesus! This is like being told I have to learn the physics of quantum entanglement on 13 dimensions just to start a car. Why the hell is this so difficult? I really need a cli envirnoment installed on my Mac to host a damn Javascript that responds to a GET request? Give me a break, there has to be an easier way.
can you tell us how to download both the npm and module bundler before installing firebase for beginners.
I'm dying to know what font/extension you used!! I love that "user" is differentiated. I found Fira Code, but that doesn't give me the different look for "user" and looks a bit different in the font anyways.
i dont' understand step 4 when he made a dist folder? I try and they said my js don't exist?
we got a PWA and we have it on app store but I can't see the data that come from app store could you please help me?
You are a SAINT
1:48 Here, in order to communicate with the server, you write the index.js file in the public folder and write the configuration code, doesn't this cause a security problem? I think it can.
Could firebase get any more confusing? They started out with simple adding js libraries in header files. Now you need to go through all this garbage with node, cli tools etc. all for compatibility with vue, angular and the endless army of javascript frameworks vying for supremacy in an increasingly diluted field. Frustrating rubbish.
I have build error: Uncaught TypeError: a.auth is not a function
but dev-build work but with another error: FirebaseError: Firebase: Error (auth/argument-error). Firebase is terrible
3 months and no progress :) This guys didn't show how he set up everything before explaining how to do in visual code.This will make a big confusion and lead to a lot of problems which is no clue of explanation in this video.
Finally v9!!
Thank you, informative and helpful video.
Appreciate the video but is there a newer version of this? It seems Firebase hasn't changed, not sure how but it doesn't work like it does on the video.
Anyone know what vscode theme is being used? I could stare at it all day.
What font are you using in VS code, I like it a lot.
Hey did you find out? Lookin for it too.
Font Name Is Dank Mono
I tried to connect Firestore in my Angular 18 project but failed. If anyone has set it up successfully, could you please share your steps or any advice on how to do it? it run to problem with standalone = true issue and without ngModule.
thanks that's a good tutorial . can i know the name of font that you use it in vs code ?
The Font Name Is Dank Mono
i have 2-dimension array which is data from sensor, everybody can let me know how to update it from esp32 to firebase. Thank you so much!!!
Great video
Thanks a lot!!! :)
What icon themes and color themes are you using for vscode?
please continue with migrating fcm to this new version..
how is it letting you use the import keyword it is telling me I cant in js
Excellent tutorial 👍
Yes, excellent :) Agree
Hi, thank you for this video very much. I can understand more about modern web development. 😊
I want more fundamentals video of Firebase web with some projects.
05:37
Here when he changes the npm path the browser path what command does he use to do that? having trouble with this step
omg im stuck at the same position too fs, its been annoying me for a good hour please help us 😭
Please bring back flame plan or billing limits
version 9.0.0 sucks, I was trying to learn firebase from past month, and my bad this version came up 2days ago and I all mess it up
Same here! I was going to start learning Firebase but since version 9.0 came i cant find any good tutorials to help me learn. Even their official samples haven't been updated yet! Am trying since the last 3 days to createUserWithEmailAndPassword but its not working. It really suckss. Hope they make some tutorials regarding 9.0.
What is the vscode theme? I really like it
serve?
To use this command you should to run this command: "npm i -g serve" to install it.
which vscode font and extension are you using? I really like it
Font Name Is Dank Mono
The "not equal" symbol is nice.
can please tell me font-family that he is using?
"I'm going to take these NPM paths and convert them over to browser module paths"... Insert wizardry... AND we're back!
THE FONT - WHAT IS IT? PLEASE
Font Name Is Dank Mono
Great video
must you buy a plan to be able to do this?
no you can do it with free account!
VERY FRUSTRATING that there is no mention at all of WHAT VERSION of firebase this relates to. There even IS mention of "our older library." Well... older compared to what? THIS video will certainly be related to some "older library" someday in the future... maybe even now... We have no way of knowing.