Video details

Host Your Angular App On Firebase | Erik Slack


Erik Slack

Master all the freshest Angular skills with on-demand workshops with industry leading pros:
What is Firebase and how can it help you and your team? Angular community member and ngChampion Erik Slack explains it all in this Lightning Talk from EnterpriseNG 2020.
ng-conf is the premier global conference for the Angular JavaScript framework, offering both in-person and online events throughout the year. Focused on delivering the highest quality training, ng-conf is where careers are made.
ng-conf: Hardwired is brought to you by: - The best Angular and JavaScript tutorials on the web - Engineering and consulting by web development experts -
Extended support for AngularJS
Follow us on twitter Official Website:


Let's get started. I'm Eric Slack. I'm an NBA champion and I quote, organize the angular Utah meetup to which I invite all of you. Please tell me if you're if you're interested, even if you're not from Utah right now, it's online. So the next event is going to be November twenty fourth or next Tuesday. And we'll have somebody who's giving a lightning talk here today, Meechie, and also somebody from speaking next next time. So I want to show you how easy it is for you guys to host your Anjelah applications on fire because it's free and it's super easy. I can fit it into a five minute light. And I want you to think of this as a lightning workshop. All right. Here we go. You better follow along because. You can do this, firebase offers a lot of tools to help you and it help your online endeavors become a success. How all of these things do work together is beyond the scope of this talk. But I want you to know that they exist. First of all, for this presentation, I will be focusing solely on the benefits of firebase postings and how to use it. These five things describe their hosting offering in a nutshell. Here are some of the advantages that Firebase hosting might have over other services that do hosting the two I want to highlight are regarding how Firebase and angular Google, the other teams are separate. We've already heard during this conference that they they do at times collaborate. One of the results of that collaboration is called Angular Fire and Angular First Fibrocystic. As you know that if you have an angular application on Firebase, Google has already tested their changes on both Angular and Firebase before releasing either of them into the wild. This results in a combination of sibling technologies that simply meld perfectly together. A note on pricing is that for Firebrace hosting beyond the free level of usage, Firebrace hosting is free until you surpass their charges. It makes it perfect for prototypes, portfolios, samples, any applications that you want to start out small scale over time. Not that different levels are factored into their paid. So you have to even if you're on the paid plan, you won't pay a dime until you've actually increased above the thresholds. One last note about pricing. By architecting your applications better, you will substantially reduce the cost of running. This is true, of course, of any applications. But using the live usage visualization charts Firebase gives you, you can see immediately the results that your efforts are having on that. In this diagram, I've outlined the four easy steps, feel free to follow along with the steps as I go. Yeah. So the first step is to set up your firebase project. So come with me to console that firebase dot Google dot com or just firebase and click up to get started. Sign up. Sign in and then click on the button, says create a project. In fact, I have a screenshot of that creative project, so I'm going to create a project. And I'm going to turn that off so it goes a little faster and while that's going. I'm going to continue with the presentation because I don't have that much time. The next step is going to be entering your name for your project. Then you get started by choosing one of these buttons. So on the next screen after this one finishes. Let's take a look. OK, let me talk to you. You can add applications, we're going to add web. Lightning. I want to also add Firebase Hosteen register my app and when that's done. It has this stuff which is not going to be needed for the most part, that's for the SDK and we're going to need to run this. I've already done that. So I'm going to move on. OK, these are the last two steps of this entire thing. First, NPM install firebase tools, then you're going to run Firebase Sloggett and you're going to do this in the terminal. So we're going to go over here. I'm going to do firebase login and it's going to say, oh, hey, you're already locked in a. Now everybody knows my numbers. OK, so now we're going to run Firebase in it. So far, this in its. And it's like, oh, hey, you already did this. Are you sure you want to do it again? We're going to take not hosting. All of these are great tools and outer space to pick the one and then entered into it. All right. What do you want to make your public directory? It's going to be just. Disc, slash, slash. Like something I've already done that here and what that's going to do for you. So I'm going to go ahead and break out of that. It's going to create these two files, Firebase, Jason, Firebase, and that's going to allow you to it generates this for you so you don't have to do the hard work of setting up the table. But you might have to edit these things later as you expand your app or maybe add more to it. So now I'm going to do firebase deploy. I'm also cutting out some stuff from this talk because it is slightly to so we don't see your concept, your terminal are you don't think it's terrible? OK, well, I'm already over time, but what I wrote was firebase deploy. And then it did it, so now I'm going to go to. My console, which I you're not going to see that either. Well, it's deployed, that's how easy it was to deploy your app. So can you guys see this? The fire response team, yeah, you're probably sharing an app about a screen, so, yeah, OK. So anyway, in my firebase hosting account, you can now go to it. It is there. I'm going to move on. So next steps, you can add all of the other things that come with that ecosystem right away. One of the things that I wanted to mention to you guys from talking to people, talking to the companies who have set up who are sponsors, one of them is Oasis Digital. And Kyle over there told me that they use Angular and Skully with Firebase hosting firebase functions and a lot of other firebase tools to build that website where you go and you get that secret word to the conference. So they're using it for their enterprise purposes as well. Also, I want to touch on you can have multiple sites under the same project advantage and it's still free. You know, it still calculates things as if you had one. Now you have to calculate the how much space each one is taking. The last thing I want to mention is that recently in the FIREBASE blog, this company called Flailing has been published and they are all about building Headly systems for Firebase. And it works amazingly as opposed to leaks into the chat. And that way you guys can check it out. Thank you so much. This has been a workshop with Eric and Eric. Underscore and hope to see you online.