Getting started with Firebase for the web

[@CritixCS]

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

[@ethancolin7792]

Respect

[@aditipandey1769]

Brother still it's not working

[@DSephi]

Thanks.

[@mitramitrogmail]

same not working, please help

[@zxzonline]

@@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.

[@deferom2858]

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.

[@DavidEast]

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?

[@sunimod1895]

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

[@dipanshuraj8565]

@@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]

@@dipanshuraj8565 if you look up firebase 2022 (I believe it is anything firebase version 9) you should fine stuff easily

[@dipanshuraj8565]

@@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.

[@LamarrGames]

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.

[@wanyuchang]

this is where I lost, can someone please tell me how to do it?

[@wanyuchang]

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.

[@UnkownChris]

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

[@Barman1904]

Go to the webapp settings in your project in firebase ....then scroll dwon then click on config ...simply copy paste the code given there

[@akauppi2]

Covered way more details than I expected! Nice to see such packed content, free of skippable sections. :)

[@axeljorgensen3438]

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?

[@codein7764]

i can help you get started, i use it on web

[@steve_ade1407]

I'm having the exact same problem 😢

[@irismiranda3650]

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

[@Sigmagaming175]

​@@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

[@diegovski]

Ask chatgpt to guide you step by step, it will even write the code for you, it's much better than these tutorials.

[@lovleenkala4267]

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!

[@yuzheh.1719]

god damn it this video should be posted as the FIRST ONE in your channel! Thank you very much bro for the smoking tutorial

[@anl6777]

What is your font and theme? It's so good.

[@nochain99]

Wish I would have started my Firebase research with this video. That was the best 11 mins I have spent in days. Well done!

[@dimitritsikaridze6220]

where did he get those urls at 5:35

[@meghanleicht8241]

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.

[@talk2frank2010]

how do i get the browser module path, he skips right over that as if its normal?!

[@Michael-Martell]

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.

[@LukePuplett]

Great video, but how do you deploy it? It should ideally end with the site being available at a public URL somehow.

[@LukePuplett]

@Envens ❤️

[@shauryaaher1579]

Can you provide a Fundamentals video for all of Firebase?

[@shauryaaher1579]

@@ToddKerpelmanCorp You're so cool!

[@SearchingNomad]

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.

[@martinjoyce5670]

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

[@andrewsides7250]

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]

add type="module" to your script tag, solved for me

[@hinrichfspruyt]

Same problem. Can't resolve it. So difficult to find support on this issue. Can anybody help?

[@hinrichfspruyt]

@@nihaalprasad7049 Didn't help. :(

[@BlissAden]

@@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

[@tech3425]

You're a very patient teacher. Thanks!

[@pablojavierjimenez]

great you're back!!!

[@alex-desroches]

excellent, thanks and also very happy about version 9!!

[@Firebase]

Great to hear!

[@edisonmondal2798]

Im getting this error The term 'serve' is not recognized as the name of a cmdlet what can i do

[@TalesOfNalstoneTeam]

This is extremely painful, I've been looking through Dev documentation, youtube tutorials, asking chat GPT etc but I can't seem to get things working. These steps are either missing basic steps from the beginning or it's obsolete. I'm still trying to figure out how to get basic Auth running

[@mikepritchard20]

I know you! Good to "see" you again. Thanks for the info.

[@andrewlawton7415]

okay..where is the code that Peter is referring to? b/c I do not see you typing that code in this video

[@bke629]

How do we sole this localhost/:1 Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".

[@hinrichfspruyt]

Same problem. Please advise.

[@HenriqueOliveira-wg9ht]

7:14

[@bokofi]

@@HenriqueOliveira-wg9ht Thanks, I started using ReactJS, it was easier to implement it then.

[@truongsa405]

Cannot use import statement outside a module import firebase from "firebase/compat/app"; import "firebase/compat/auth";

[@ianthethird420]

Make sure the script is set as type=”module”

[@lightgridptyltd5032]

@@ianthethird420 Still doesn't work. "Failed to load module script..."

[@bke629]

@@lightgridptyltd5032 It also says something about a MIME type

[@hinrichfspruyt]

@@bke629 Yes. I have no idea where to get support for this. Stackoverflow has nothing on it.

[@ishananaguru]

@@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.

[@BradleyKisia]

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.

[@herol3oy]

Angular and firebase please.

[@youssefelasraouiGK]

I want to deploy my project, but I'm I supposed to move the src folder and the node-modules into dist?

[@vodupit]

Thank you Man! You made it so easy to understand!

[@Firebase]

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!

[@uditsethi2578]

even after Importing the authentication package I am getting error in browser getAuth() not defined. Can someone help please?

[@benjaminlarenasbravo2509]

This should be my first tutorial, thx from Chile!

[@mashudfariduddin7262]

sorry , was looking at your example and I am stuck at the onAuthStateChanged part , how do you do that ?

[@lucasmouquet3152]

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.

[@bke629]

Yeah it's like that for me, I tried adding "type": "module" to the package json with the same outcome

[@shikshamishra5668]

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

[@lone.faerie]

What font is that??? How do you get that "not equal to" symbol?

[@mikestanley18]

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.

[@pranjal86able]

@@mikestanley18 I don't think that is Fira Code. The f looks totally different.

[@gangadharkaja2132]

Its Dank Mono

[@BdThuan]

I feel that version 9 is harder to use than version 8. and I have to downgrade back to version 8.10.0

[@sevenseven6123]

bit late to the party, but do you mind sharing your font/color schemes that u use for VSCode?

[@babylonba4329]

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?

[@wolfpack4449]

I couldn't find the fundamentals playlist. Can you send a link?

[@skylerjknight]

V9 is gonna be sick 😏

[@nazari_co]

That was Awesome!!! such completed fundamentals wow. ❤❤

[@Firebase]

Glad you liked it!!

[@worldclasscode1847]

Do you use React?

[@TheRedPrometheus]

npm bundles dont work for me. Seems like browsr modules is the only way to go for now!

[@anshita6898]

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!

[@shubhamsharma5631]

please provide link to playlist , if a video is from playlist. Ty for such a packed content.

[@Theventuredkings]

Being trying to use fire base service and its very complicated, i watched about 10 videos now, including yours, yet nothing is working

[@ArchangeLillith]

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.

[@hamidcoolboy]

"serve dist/" doesn't work for me. I had to run "npx server -s dist".

[@AmmarOuds]

Thank you sir for the good walk through, One question , how does this work with parcel bundler? thank you in advance

[@worldclasscode1847]

Do you use react? Bundler is automatic there?

[@yavuzdemir7184]

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.

[@jamesr2408]

@ 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.

[@bhimloon6471]

Hi..did you able to connect firebase web to your old Android/ Ios app ? Please help me fix too.

[@masonamccall]

So why do I get "Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../". I followed everything to the T

[@HSA-]

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?

[@vahiddabbagh6794]

Amazing tutorial, very nice teaching, thanks

[@scars5019]

how did u get it to work vecause im currently struggling to even install the webpack files he spoke abt in the video

[@john_yeager]

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?

[@poojari18]

Excellent tutorial 👍

[@worldclasscode1847]

Yes, excellent :) Agree

[@KevinManda]

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

[@agadaFrancisLouis]

i feel your pain, Kevin😂😂😂😂

[@jimshtepa5423]

has anyone come across an error related to top level await?

[@BefriendDeveloper]

Very high-quality content. Ty.

[@BlueyMcPhluey]

not a fan of this new structure and I can't seem to get my authentication working with Ver. 8 any more

[@baremetals]

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

[@rameshchandrapola1102]

Great video Thanks a lot!!! :)

[@nobleokafor5171]

one for using firebase on cross-platform frameworks like react native and flutter would be nice

[@E9_G]

True! I really wish Firebase V9 functional programming features could be implemented in Flutter and not the old OOP approach.

[@josephweaver8545]

What font are you using in VS code, I like it a lot.

[@miguelmarquiori]

Hey did you find out? Lookin for it too.

[@gangadharkaja2132]

Font Name Is Dank Mono

[@chriskodehode4937]

Great tutorial, thanks to it, I not only started with Firebase but also with Webpack 👍 Thanks a lot 😁

[@Firebase]

Great to hear!

[@uzeyiryariz3169]

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.

[@AmazinglyStrangeMedia]

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.

[@allaguimaouia6510]

thanks that's a good tutorial . can i know the name of font that you use it in vs code ?

[@gangadharkaja2132]

The Font Name Is Dank Mono

[@jaislandviewer]

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.

[@blatchie4608]

You are a SAINT

[@sabuein]

Thank you, informative and helpful video.

[@0100-w1s]

can you tell us how to download both the npm and module bundler before installing firebase for beginners.

[@jatustudiobox3986]

Hi, thank you for this video very much. I can understand more about modern web development. 😊

[@mohamedkarim-p7j]

Thank for sharing

[@LatinoWebStudio]

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.

[@BradleyKisia]

What icon themes and color themes are you using for vscode?

[@Human_Evolution-]

This does not work........ You had a bunch of code randomly paste itself in right away. Not mine.... So much time.

[@DavidEast]

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?

[@sky0dragon]

need an updated version of this and please do it in windows

[@sanazkamali5825]

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?

[@CongTuyenLe]

which vscode font and extension are you using? I really like it

[@gangadharkaja2132]

Font Name Is Dank Mono

[@seccat]

The "not equal" symbol is nice.

[@dogman8749]

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

[@scars5019]

omg im stuck at the same position too fs, its been annoying me for a good hour please help us 😭

[@eyeofthetiger7]

THE FONT - WHAT IS IT? PLEASE

[@gangadharkaja2132]

Font Name Is Dank Mono

[@lewisliewguozhang5760]

Thanks David very well explained 👍🏻👍🏻🔥

[@Firebase]

Glad it was helpful!

[@worldclasscode1847]

Yes! :)

[@edmiddlebrooks1696]

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.

[@nataliehill5899]

What's wrong with the lowercase "f" and the lowercase "s"?

[@sumersinghrana8868]

I want more fundamentals video of Firebase web with some projects.

[@raidenkamisato3128]

i dont' understand step 4 when he made a dist folder? I try and they said my js don't exist?

[@thangduong8799]

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!!!

[@aleksandarpanov1385]

serve?

[@lucianocunhateixeira]

To use this command you should to run this command: "npm i -g serve" to install it.

[@alexisijomah]

must you buy a plan to be able to do this?

[@sahil-jx7py]

no you can do it with free account!

[@markchang1762]

What is the vscode theme? I really like it

[@robert-f4q8e]

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

[@harshal.rathore]

someone tell me which font is he using??

[@gangadharkaja2132]

He Is Using Dank Mono

[@kanzulilmtips]

Great video

[@angelomendoza6894]

Anyone know what vscode theme is being used? I could stare at it all day.

[@luisandrade1291]

Finally v9!!

[@touseefghazanfar8487]

Awesome tutorial very informative thank you

[@dotanmezushan6320]

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.

[@gouravnainwaya5669]

Very helpful

[@raidenkamisato3128]

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.