HowTo Video Tutorial Script (696 words)

David East: What’s up, everybody? David here. And today, I have a quick and easy Firecast for you. We’re going to get up and running with Firebase and the web. And this is actually to be the first of many screencasts in a series.

So make sure you subscribe to get notified of tutorials on authentication, storage, hosting, and web push notifications with Firebase Cloud Messaging. Also, if you’re a fan of JavaScript frameworks, I’m going to dropping videos for Angular 1 and 2, Polymer, React, and Ember. So you better subscribe, because you don’t want to miss those.

But today, we’re going to start with the very basics. I’m going to show you some mad copy and pasting skills by getting the project initialization code from the Firebase console. And then we’re going to set up a small web app. So let’s go and dive in.

So I’m in the Firebase console at console.firebase.google.com And you can see I’m logged in as myself up here, just smiling at you. But to get started, I’m going to create a new project.

So I’m going to click Create New Project. Going to call it web-quickstart. And then we’ll create it. My project is now created. So I’m going to click Add Firebase To Your Web App. And this brings up a little model with all the initialization code I need to get started. It has things like my apiKey, authDomain, databaseURL, and storageBucket.

So then I can go to the bottom right and then I can click Copy. And that’s all the code I need to get started. But just as a little FYI, you can access all of this information by clicking Auth And then going up to the top right, where there is Web Setup. But now, to the editor.

So here in my editor, I’m going to get crazy. I’m going to create this web page from scratch. So I’ll start out with my basic HTML boiler plates. Give it a title. And now I can just paste in all the code from the console. And this is all you need to get started. And just to prove that it works, I’m going to use the database as a little tiny demo.

So I’m going to create an H1 and given it an ID. And every single time the value changes in the real time database, I’m going to sync it to this H1. So the first thing I need to do is get that H1 by its ID. And then now I’m going to create a database reference using firebase.database().ref(). And then create a child location to the text location. And now I can synchronize any changes using the on() function. And then using ES2015 arrow functions, I can just do it all in one line.

So to the left right here, I have my projects in the Firebase console. And to the right is just my blank page. To use the database, I’m going to remove all security. So I’m going to click Rules. And then I’m going to say read is true and write is true. And click Publish. And you should totally know that you only do this while you’re developing. Because that means anyone can read or write to your database.

So now I’m going to give my browser a Refresh. And then I’m going to add a text location. And it synchronizes to the browser. And so I can change it and then it changes as well. So keep in mind that the real time database is just one of the many features Firebase offers for the web. You can also use authentication, storage, hosting, and even Firebase Cloud Messaging.

So that’s all it takes to get started with Firebase in the web. And if you want to go and learn more, then check out the link in the description for our official documentation. And if you’re super excited to learn more about Firebase on the web, then please subscribe to our channel because we’re going to have tons of more content. So that’s all for this time. And I will see you all later.