In our previous articles of the google firebase series, we were introduced how to setup firebase, the services that firebase provides such as authentication, authorization, and database. Today we will be going over how storage works on google firebase, as well as how to host our app through firebase.
Before we dive into today’s topics, if you haven’t read the Part I and Part II of my google firebase blog series, feel free to check them out, as it would make more sense to what we are about to go over today.
Remember our last blog where we setup the firebase.js file? Line 16 is the exact setup where we can access our firebase storage service from. To setup storage service on firebase, we need to go to our project on the firebase website, click storage on the left side of our project overview, and Get started with the storage service. Once the setup is completed on firebase, now we have access to use firebase storage in our codes.
Google Firebase Storage mostly help store and retrieve user generated files, such as photos or videos that we upload online. In our app that we were building, if we want a user to upload their images to our app, we need to access firebase storage and retrieve the user uploaded images. The upload images will be downloaded as a link for us to access it in our codes.
Let’s take a look at the above code snippet example of accessing firebase storage service. We made a function called handleUpload, as the name implies, this function will help us handle users uploaded images. Line 18 is a variable named uploadTask that we made to call the storage service that we setup in our firebase.js file, get the image name that user uploaded, put the image into firebase storage. On line 19 we use the variable uploadTask, attach a listener to it. and make sure on state_change, we can take a snapshot of the uploading image, and use JavaScript method to calculate what is the progress of the image upload. Even though it might seems like that an image upload takes no time, but it is still an asynchronous process, which means we want to keep track of its upload time and progress. The next three lines are pretty self explanatory, it will try to catch the error and give us an alert of the error message, if any errors occurred during the process. Line 31 we started another function after the uploading process is completed, we are trying to access firebase storage system once again to get the downloaded URL of the image that user just uploaded. Once we retrieve the download link, we want to access our firebase database collection, and we want to add the user uploaded image to our app through firebase database. (Checkout Part I of my blog series where we went over what google firebase database does and how to set it up).
One cool feature of google firebase is that firestore can calculate the timestamp of when a user uploads the image, which we can access it through Line 40 code. This is to make sure that we are accessing the accurate time of when the user uploads an image, accordingly to the server time zone, not to different users time zone. Line 42 to 45 is basically reseting the state of the image, progress and caption of the upload feature (React Hooks). Once a user finished uploading an image to our app, we should be able to access it through firebase storage, as well as firebase database.
Now that we went over the storage service that firebase offers, let us take a look at the last service that Google Firebase is offering: Hosting! Once our project/ app is completed, we want to upload/ host it online so others can play around with it and have fun! Therefore, let us dive right into the hosting!
The very first step to start hosting our app is to go to firebase website, click on Hosting to start hosting our app online.
Once we get started with hosting, firebase will give us some simple instructions of how it works, first run this command npm install -g firebase-tools this command will allow the first time developers to install the firebase tools. Once we installed the CLI, we can proceed with the command firebase login This command is also self-explanatory, it uses our gmail account to login to firebase and connect to our project. The next command will be firebase init the name implies we are going to initialize our project with firebase hosting.
We are going to choose Hosting option on that CLI feature. The next page we will choose the option to use existing project and connect our app with it. The next part is very important as we want to make sure to type in our option as build, not to use the default public directory as the folder to deploy! This is a React step and we have to follow the most optimal build for our deployment. Once we create the build folder for our app hosting, we will configure it as single-page app (type y into the terminal).
Once firebase initialization is completed, we want to run the following command npm run build. What this command does is that it will bundle and optimize our app to the build folder, and host it through firebase! And the last command we will run after the build folder is optimized, firebase deploy will simply deploy our app online and give us the live website address for our app!
And there we have it! Our app is up and running live! Feel free to checkout my Grams app that I built with firebase and all of the services that we mentioned in our Google Firebase blog series! And feel free to connect and chat with me on LinkedIn as well! Thanks for reading and have a great day!
