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.
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!
Haihuan (Sam) Chen - Flatiron School - Staten Island, New York | LinkedIn
View Haihuan (Sam) Chen's profile on LinkedIn, the world's largest professional community. Haihuan (Sam) has 6 jobs…
Instagram clone app. Contribute to haihuanchen/Grams-Project development by creating an account on GitHub.