Getting Started With Firebase Hosting On The Web

Firebase Hosting


If you’re not familiar with the database security rules, you essentially have this database that has all this data and you want to secure it so you know who can access what parts of your database. But in this case, I’m not really using the real time database. So I’m just going to create the default file.

Public Directory

The public directory is usually the directory that contains your index.html file, which is the entry point of our application and in my case, I usually stick all of that into a folder called Public. So the next question is for single-page app users. So if you’re building an app with Angular, Ember, Polymer, or any JavaScript framework where you’re setting everything up as a single-page app, then you usually have to deal with the hash bang in your URL routes.

Rewrite URLs

Well, Firebase Hosting gives you a feature to be able to rewrite all of these URLs so you can actually use just regular server routing. So if you are doing that, then you want to use this option. But in my case, I’m just using a single index.html app. Now it’s going to ask me if some files exist, like, 404 in index.html. So I’m just going to not overwrite those and it’s going to do all of its initialization work and we can see down here that initialization is complete. So with initialization complete, I can finally go out and deploy my app and to do that, it’s just one simple command.

Firebase Deploy and just like that, our website is out there on the web. So you can see we can access our website through this URL right here, or we can use the CLI to open it. So to open the website through the CLI, I’m going to type Firebase Open and it’s going to give us a couple of options and I’m going to scroll down to Hosting Deployed Site and just like that, you see that we have our website hosted right out onto the web.


So now that I have this deployed, what I want to do is I want to make a change and I’m not going to want to deploy this change to production. I’m going to want to display it to a staging or a QA site, or something like that. So I’m going to go back into my app, and I’m going to make this change and it’s pretty significant and now that the change has been made, I want to set up a staging environment and to do that, I can use this command called Firebase Use, dash, dash, Add and what this command is going to do, it’s going to say, well, you have all these other Firebase projects. Would you like to use one of them to set up a different deployment to another domain?

And in this case, I do and I want to select Web Quick Start Staging and it’s going to ask what alias I want to use for this project and it’s my staging site. So I’m going to call it Staging and now it’s created this alias and just to show you what’s happening behind the scenes, I’m going to cat out this Firebase RC file or as I like to call it, Firebaser C and this file is just a JSON object with our different environments and using the CLI, I can switch back and forth by using Firebase Use and its alias name. So use default will get us back to our production and then use staging will throw us back to our staging environment and since we are using our staging environment, I can now deploy my changes to staging. So let’s type Firebase Deploy and then now I’ll do another Firebase Open, and then go to my deployed website.


Please enter your comment!
Please enter your name here