Getting Started with Firebase 9 #2 - Setting up Webpack

so then like i said before in order to take advantage of tree shaking in firebase 9 to remove any unused code we need to use a module bundler like webpack because it's the module bundler that bundles our different pieces of imported source code together into a final javascript bundle file and it's that javascript bundle that we've linked to from our html page now if you're creating your website with a cli tool like create react app or the view cli or something like that then most of the time webpack or another module bundler is automatically set up for you so in those cases you won't need to manually set it up yourself and you can go right ahead and just start using firebase 9 from the get-go however if you're not using a cli tool to build your site and you're just making a regular site using html and vanilla javascript then you'll need to set up a module bundler yourself now i don't want to assume that you're using a cli tool like the view cli or create react app to build your website so i'll be showing you how to set up webpack to bundle our code in this lesson and then in the next lesson we'll start to use firebase nine so if you want to skip this lesson if you already know how to do this then be my guest so i've already got open a project folder in vs code which has nothing in it at all to begin with the first thing i'm going to do is create a source folder which is where all of our source javascript code is going to live and inside that i'm going to make a new index.js file which will be our javascript entry file so this is the file that we'll be writing all of our javascript code in later on the next thing i'll do is create a dist folder now this is where our final bundled javascript code is going to live and we'll specify that to webpack shortly also inside this folder i'm going to create an index.html file this will be the webpage that we serve to the browser and we'll hook that up later to our bundled javascript file so we don't link to the source javascript file from here but to a bundled one when we have it now inside the html file i'm just going to boil and play a page by typing doc and then hitting tab then i'm just going to update the title to say firebase 9 and also i'm going to add an h1 in the body and that's going to say something like getting started with firebase 9. the next thing we need to do is install webpack and configure it to do this we'll be using npm the node package manager so it's important at this point to make sure you have node.js installed on your computer if you don't then you can download it and install it at nodejs.org once you've done that you can open up a terminal and we're going to type npm init and then hyphen y this is going to create a new package.json file to keep track of all of our different dependencies that we need to install and one of those is going to be webpack so let's do that so we need to install webpack but also the webpack cli so type now npm if install then webpack and then webpack hyphen cli and then at the end do hyphen d capital d to save this to our dev dependencies so we're installing two packages here right webpack itself and also the webpack cli which is going to be used to run webpack so now that's done we can go ahead and make a new webpack config file inside the root of our project directory so not inside the source folder or the disk folder but in the root project folder now inside this file is where we configure what we want webpack to do what we want it to do is look at our source index.js file and any imports that we have in there later as well and then bundle all of that code together into a single bundle file so to do this we need to export an object which represents our webpack configuration now i don't want to waste your time by typing all of this configuration out from scratch so what i'm now going to do is just copy this from the course files and paste it in and then i'll explain it line by line so then first off we have this module.exports and we export an object from this file and inside this object there's different properties which represent the configuration of webpack for us so first we specify a mode now that can be production for production but we're just developing so i've specified development then we have an entry property and this is the entry file that we need to specify a path to it and that says where we want webpack to initially look for our javascript source file so we say inside the source folder then index.js now we have an output property and this is an object now the first property of the object is a path so it's a path to whatever folder or directory we want the output file to be put into now we want it to be inside the dist folder now in order to create this path we need to use the path module right here so we require that that is a core node module and then we use that and a method called resolve on that path object to resolve a new path this underscore underscored name basically just gets the current directory of this file and then we say go into the dist folder from here and this is required because we need an absolute path right here not a relative one unlike this all right so after we have the path we also specify a file name for the output file which i've called bundle.js and then finally after the output property we have a watch property which i said to be true and this is so that when we run webpack it's going to watch our file over here and every time we make a change it's going to bundle up the new code into the bundle.js file so then we will run webpack and it will take the source file and any imports inside this file as well it will bring those in as well and bundle them all together and spit it out inside the dist folder into a file called bundle.js and like i said every time we make a change to that file and hit save because we're watching it it's going to re-bundle that up all right so now we have that webpack config file set up next we want to run webpack to do all of this bundling so to do this we'll make a custom script in our package.json file i'm going to call it build but you can call it something else if you wish and then for that we just said it to be webpack so now when we run this script it will run the webpack command and that will automatically look for our webpack config file and run webpack according to our configuration so just before we do that let's add some code into the source index.js file i'm just going to add in a simple console log and then i'm going to save it but later on we'll be using file imports in here to import functions from the firebase library and that's where the power of module bundle is coming to play for now i just want to see if this process is all going to work so now i'll open up a terminal and i'm going to run our new script by typing npm run and then the name of the script which is build and when i do that webpack will take our source code and it's going to bundle it into the output file inside the dist folder and we can see it right there and it's also going to be watching our index.js file for changes so that it rebundles every time we make a change and then save the file now remember we also need to link to this javascript file the new bundle from the html page so let's also do that now so right at the bottom of this page i'm just going to add a script tag and set the source to be bundle.js so now if we preview this in a browser it should show the message in the console right now to preview the site you can use any local development server i'm just using a package called live server which you can install by going to your packages and then searching for live server and it's this package that you want right here and with that installed i can just right click on any html file and select open with live server and now in the browser if i open up the dev tools then we can see over in the console hello from index.js so webpack has bundled up our code from that source file it's output into the bundle file which we've linked to from our html page which is why we can see it inside the console so that is webpack setup next up we're going to start working with firebase

Channel: The Net Ninja

Views: 13,995

Keywords: firebase, firebase tutorial, firestore tutorial, firestore, tutorial, firebase 9, firestore 9, firebase 9 tutorial, firebase auth, firebase auth tutorial, firebase auth 9, firebase version 9, auth tutorial, firebase 8 vs 9, webpack, firebase webpack, firebase 9 webpack

Id: vK2NoOoqyRo

Length: 8min 37sec (517 seconds)

Published: Mon Nov 08 2021