Getting started with Firebase for the web – Firebase Fundamentals

i'm going to show you how to get started with firebase for the web now you might be using one of many different environments or platforms you might use angular react view svelte or even plain javascript no matter what you're using i'm going to teach you the fundamentals of including firebase in your web apps now there are so many different ways of including firebase into your web app but in this video we're going to use two key tools and that's npm and a module bundler now if you don't have npm installed don't worry check the link in the show notes and you can install node.js which automatically includes npm but we're going to get started in 4 steps step 1 installing firebase i'm in my editor visual studio code and i have my project open i'm going to use the terminal within vs code to run the command mpm init y to set up my mpm package which by the way make sure to go back and fill out all these fields in your package.json with real information then i'm going to install the firebase sdk with npmi firebase once the command finishes you have access to the firebase library and this brings us to step two creating a firebase app i'm going to create a folder named src and a file named index.js then i'm going to write an import statement that references the firebase app sub package from there i'll import the initialize app function this function creates a firebase app that stores your firebase configuration for your project when you create a firebase project in the firebase console we give you a configuration object that you pass to this function this function returns a firebase app instance this instance is how the firebase sdk knows how to connect to your specific firebase backend now i know what you're thinking what about this configuration object isn't it unsafe to include this kind of information on the client can't someone take this info and delete all my data in my database or something bad like that the firebase configuration object is perfectly safe to include on the client side it's how the firebase library knows how to talk to your firebase project if you're worried about security which you should be so that's good you secure your firebase projects by using security rules and app check if you want to learn more about those then check the links in the description but we're going to move on to step 3 which is importing firebase services let's say i want to monitor authentication state so i'll import firebase auth now you might not be using firebase off but don't worry because it doesn't matter what i'm using in this video each firebase service follows a similar pattern you import the service from its path firebase service then import the service getter function in this case it's get off and as you would expect each sub package has a getter function if i was also using firestore then i would follow a similar pattern what's important to note here is that you must initialize your firebase app first before calling any service getter function each getter function can optionally take in the firebase app as a parameter which i prefer to pass in just to be explicit now to use a feature like monitoring authentication state you import those as individual functions these individual functions take the firebase service as the first parameter the on off state changed function then also takes a callback that tells me if a user is logged in this is the pattern that the firebase sdk follows for each sub package as well each function takes in an argument of either the service returned from the getter function or some relevant container object like in firestore if i want to create a collection i'll need to pass in the firestore service as the first parameter if i want to get the documents in this collection i can import the getdocs function and then pass the collection as the first parameter now you might be wondering why these features are imported as individual functions that take in a service as the first parameter you might think that these functions would be methods available on the service itself we actually had our older library structured that way but we learned over time that your web app can get significant performance improvements by following this functional approach why because when library code is structured in this functional way javascript module bundlers know how to eliminate unused code and this is known as tree shaking it's extremely useful for reducing the amount of library code in your application which in turn will help speed up page load performance now we can't run this code as is in the browser because the browser doesn't understand these imports now you might have seen in the documentation something called browser modules browser modules are a native web platform feature that allow you to export and import code as modules i'm going to take these npm paths and convert them over to browser module paths and these are just what looks like links out to a javascript file and what's great about these are is that you can run these automatically in the browser so i'll add a index.html file and do a simple little boilerplate and then in my head i will reference the script and the important thing with browser modules is to include the attribute type equals module and now i'm just going to serve this directory and then here in the browser we can see that it says no user and when i click in we this is the exact code that we have in our editor we provide examples for using browser modules because it's really easy to get started you just copy the code paste it in into the browser and it just works but we don't recommend using them for production for production we recommend module bundlers like webpack and rollup and that's because there are so many optimizations that they can do just like tree shaking which will eliminate any unused code from the firebase library now keep in mind if you're using a framework cli tool like angular cli create react app view cli next js felt kit these tools they handle the module bundling for you they'll use a tool like webpack or roll up underneath the hood so all the code that we've written so far will just automatically get bundled for you in those tools but if you're doing this by hand or you just want to learn how it works with webpack then tune in to the last step let's revert back to the npm import path and then install webpack from npm but with two packages webpack and webpack cli and we'll do the dash capital d flag to save it as a development dependency and to use this we'll tap into our no modules folder then dot bin and then from here we can use the webpack command the way that module bundlers work is that they look for a file called an entry point this is the root of your javascript code and it usually imports everything needed for the application and then dash o for an output folder of dist but pro tip if your entry point is located at src index.js and your output file needs to be disk main.js then you can drop all of these flags so now we have our main.js file in our disk folder so i'm going to move over my index.html and run the static server to check out the result and we see that we have no user and then when i click on it this file looks really strange but that's okay because webpack is going to do all sorts of optimizations that make the final code look unreadable if you need to debug you can always set up source maps so to set up source maps i'm going to create a configuration file for webpack name webpack.config.js this can do some really advanced things like process your typescript copy file start a dev server and all sorts of other things in this video we're just going to set it up to do some basic bundling each webpack config exports out an object that takes in a couple of required keys the first one is the entry property and this is the same thing as our dash dash entry flag so it's just our source slash index js then the next thing it exports is the output key and this takes in two keys the first is the path and the path is the location of the folder and to specify this folder we're actually going to use a node.js utility that resolves to the folder and then it takes in the file name and that is the name of the bundle and in this case we'll name it bundle js so the first step for the source map is to set the mode to development and then finally we'll set a dev tool and this is how you specify your source maps now there are all sorts of types of source map tools you can provide but we're going to use eval source map because it is really readable i'm going to provide a link in description for all the other source maps you can use so now when we build everything looks great and we can see that we have our bundle.js in the disk folder so now in index.html i'm going to rename the file and when i run the server no users on the console and this is the exact code we wrote in our editor and i can add breakpoints and step through it as if it was the normal code that we wrote drop a comment if you have any questions or an idea for a fundamentals video and make sure to check out the fundamentals playlist because it's brand new but it's going to be growing with more fundamental videos over time but that's the fundamentals of getting started with firebase for the web

Channel: Firebase

Views: 26,360

Rating: 4.8081703 out of 5

Keywords: purpose: Educate, pr_pr: Firebase, series: Firecasts, type: DevByte (deck cleanup 0-10min), GDS: Yes, firebase fundamentals, getting started with firebase, firebase for the web, getting started with firebase for the web, firebase developer, firebase developers, google developer, google developers, firebase, google, David East

Id: rQvOAnNvcNQ

Length: 10min 59sec (659 seconds)

Published: Wed Aug 25 2021

Reddit Comments

[u/6azorPazor]

Dank Mono