Getting started with Firebase for the web
ฝัง
- เผยแพร่เมื่อ 29 มิ.ย. 2024
- In this video, Firebase Senior Developer Advocate, David East will show us how to get started with Firebase for the web. No matter what platform or environment you’re using, David will discuss the fundamentals of including Firebase in your web app.
Chapters:
0:00 - Intro
0:46 - Step 1. Installing Firebase
1:19 - Step 2. Creating a Firebase App
2:44 - Step 3. Importing Firebase services
5:15 - Step 3 cont. Browser modules
7:13 - Step 4. Bundling with webpack
10:29 - Wrapping up
Resources:
Firebase web documentation → goo.gle/3BaduPz
Download node.js / npm → goo.gle/3zjylj9
Firebase Security Rules → goo.gle/30mZ4Mx
Firebase App Check for web → goo.gle/3zotPju
Webpack sourcemap options → goo.gle/3klGLjH
Subscribe to Firebase → goo.gle/Firebase
#FirebaseFundamentals
product: Firebase - General; fullname: David East; re_ty: Publish; - วิทยาศาสตร์และเทคโนโลยี
![[HIGHLIGHT] หมีLIVEปะ? | EP.171 เห็นแต่ในจอ วันนี้มาต้องขอคารวะ](http://i.ytimg.com/vi/gPWLxa0e_Z8/mqdefault.jpg)
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.
Covered way more details than I expected! Nice to see such packed content, free of skippable sections. :)
You're a very patient teacher. Thanks!
great you're back!!!
god damn it this video should be posted as the FIRST ONE in your channel!
Thank you very much bro for the smoking tutorial
Wish I would have started my Firebase research with this video. That was the best 11 mins I have spent in days. Well done!
excellent, thanks and also very happy about version 9!!
Great to hear!
This should be my first tutorial, thx from Chile!
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
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.
What is your font and theme? It's so good.
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!
That was Awesome!!! such completed fundamentals wow. ❤❤
Glad you liked it!!
Do you use React?
Great video
Thanks a lot!!! :)
Thank you, informative and helpful video.
I know you! Good to "see" you again. Thanks for the info.
Very high-quality content. Ty.
Awesome tutorial very informative thank you
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
Hi, thank you for this video very much. I can understand more about modern web development. 😊
Excellent tutorial 👍
Yes, excellent :) Agree
where did he get those urls at 5:35
V9 is gonna be sick 😏
how do i get the browser module path, he skips right over that as if its normal?!
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.
Very helpful
Angular and firebase please.
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 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!
You are a SAINT
Great video
Great tutorial, thanks to it, I not only started with Firebase but also with Webpack 👍 Thanks a lot 😁
Great to hear!
Finally v9!!
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.
THANK YOU!!!!
You're welcome!
Can you provide a Fundamentals video for all of Firebase?
@@ToddKerpelmanCorp You're so cool!
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.
please provide link to playlist , if a video is from playlist. Ty for such a packed content.
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
Thank you !!!
Awesome!
Thanks!
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.
Thanks David very well explained 👍🏻👍🏻🔥
Glad it was helpful!
Yes! :)
I feel that version 9 is harder to use than version 8. and I have to downgrade back to version 8.10.0
Im getting this error
The term 'serve' is not recognized as the name of a cmdlet
what can i do
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 couldn't find the fundamentals playlist. Can you send a link?
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.
I want to deploy my project, but I'm I supposed to move the src folder and the node-modules into dist?
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?
YASSSSS!!!!!!!
I want more fundamentals video of Firebase web with some projects.
Great video, but how do you deploy it? It should ideally end with the site being available at a public URL somehow.
@Envens ❤️
really really usefull
bit late to the party, but do you mind sharing your font/color schemes that u use for VSCode?
Being trying to use fire base service and its very complicated, i watched about 10 videos now, including yours, yet nothing is working
sorry , was looking at your example and I am stuck at the onAuthStateChanged part , how do you do that ?
can you tell us how to download both the npm and module bundler before installing firebase for beginners.
even after Importing the authentication package I am getting error in browser getAuth() not defined. Can someone help please?
has anyone come across an error related to top level await?
What icon themes and color themes are you using for vscode?
Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".
Why does this error keep coming up in the console?
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.
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.
npm bundles dont work for me. Seems like browsr modules is the only way to go for now!
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?
it working
need an updated version of this and please do it in windows
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😂😂😂😂
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
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
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?
please continue with migrating fcm to this new version..
not working because my vscode not recorgnised command ''serve"
am soo downgrading to 8
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!
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
"serve dist/" doesn't work for me. I had to run "npx server -s dist".
not a fan of this new structure and I can't seem to get my authentication working with Ver. 8 any more
What is the vscode theme? I really like it
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!!!
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?
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.
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?
Anyone know what vscode theme is being used? I could stare at it all day.
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.
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”
@@ianthethird7955 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.
i dont' understand step 4 when he made a dist folder? I try and they said my js don't exist?
Hello sir, where can i get the configuration object?
using react , what steps are not needed ?
please say about realtime database
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
If i change my index.js, the changes dont actually appear if i serve the dist directory. How to i fix this?
@ 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.
"I'm going to take these NPM paths and convert them over to browser module paths"... Insert wizardry... AND we're back!
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.
Please bring back flame plan or billing limits
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
data not displaying in the realtime database
as if i didn't write any js code
can you help ?