7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.6 Firebase Hosting

Hello everyone. This is Reggie Dawson. Welcome to the Use Firebase as Your Back-End course for Tuts+. In this video, we are going to learn about Firebase hosting. Normally, you would need a web host for the app that we just built. Fortunately, Firebase offers hosting of our static assets. What this means is that we can upload the app that we just built to a publicly accessible IP address. Make no mistake, this is full featured hosting and even offers the ability to use a custom domain. In keeping with the general theme of Firebase, hosting is also easy to use and deploying a project is simple. The first thing we need to do is set up the Firebase tool. We just need no JS to do this. This is all we need to deploy our app to Firebase. Before we can do anything, we must first let Firebase know who we are. Let's run the Firebase login command. This will launch our browser window that we can use to authenticate in Firebase. After authentication, we can run Firebase list. This will display all of our available Firebase apps. First, we need to navigate to our project folder. For this to work though, we actually need to be a level up from our project. The reason being is that we need to specify the folder that holds our project when we deploy, and Firebase will upload the entire folder. For Cloud 9, all I will do is copy my entire project and store it in a folder called deploy. After I have my project copied to my folder, I'm going to initialize Firebase. This command will initialize the folder and create a firebase.json file. First, it will ask you what Firebase you want to use. Then it will ask you what directory will be the public group. This is the folder that's going to be uploaded to Firebase. Make sure all of your project files are in this folder. For our purposes, we're going to use deploy as the public group. Let's go over to the firebase.json file. The first thing in the file is the name of our Firebase app. Next is public, which represents the folder where our project is stored, and finally, we have ignore, which tells Firebase what files to ignore in the upload. To deploy our project, all we have to do is run a Firebase deploy. This will push the app up to the Firebase servers and return the link to the app. This is now a live app that exists at this address. Let's take a look at our deployment in the dashboard, go to the hosting link. Here we have options for using a custom domain. If we have our own domain we want to use, we can use it with Firebase, but bare in mind, this is a paid premium feature. Also we have a list of deployments that we have pushed to Firebase. Let's add another deployment. Now that we have more than one deployment, we can delete older deployments or roll back to older deployments. In order to completely disable hosting and remove all deployments, we have to use this command. This command will remove any deployments and disable the site. If we disable the site this way, all we need to do to enable the site again is deploy our site once more. Let's take a look at our deployed site. That's everything you need to know to host your app on Firebase. In the next video, we will get started with building an app with Foundation for Apps, which is built on Angular, to demonstrate using Firebase with the framework.

Back to the top