Deploy Angular App using Firebase Hosting | Step by Step Tutorial

hello and welcome back everyone in today's video we'll be learning how to deploy an angular application using Firebase hosting and honestly I just recently deployed my own application using Firebase and it was really simple it took me less than a minute to set up everything and deploy my angular application so if you have been following us and this playlist on YouTube where we are building this awesome application online with you live every single week we have been building a real application in angular using real apis that fetch cryptocurrencies prices and then we also connected it with Firebase database as well as we added authentication using autho and you can see we have sign up with the sign in Google Facebook Twitter all sort of stuff we even have a join button where you can go ahead and create your own account with the with your own email ID and password so we have been building that since a long time but as you can see it's no longer running on my Local Host it's running on an actual URL now obviously I can buy a domain and deploy it on my real domain whatever I bought a custom domain but for now I'm just happy to deploy it with Firebase and as you can see a Firebase gives me these two URLs now in this tutorial we will see how we can do that for a brand new scratch application in angular and deploy it from uh from the very beginning because if you haven't been following our tutorials where we connected Firebase with angular before well you might be missing out and you might not know what we are going to do if I simply go ahead and deploy my angular application so maybe I need to show you step by step on how you can start an angular application from scratch connect it to Firebase and then finally deploy it using Firebase hosting so we learn all of that step by step but first let's go ahead and see what I have over here I just created a new angular application it has nothing but a heading on the top right deploy 1.0 there's nothing else on this angular application I want to deploy this using Firebase the first and number one thing you need to do is make sure you have Firebase installed in your machine right so for that I'll use npm install minus G which is globally and I want to install Firebase tools now Firebase tools comes with a lot of helpers with a lot of tools that we can use to deploy things to connect with Firebase and even to our authentication and so much more so this is a very useful library that you can add to your whole machine this works with both sorry this works with both Mac as well as Windows so no matter what machine you're using it should work for you okay so we are already able to install it it was already installed on our machine so maybe it just updated the library itself now the next thing we need to do is add Firebase hosting so I'll say Firebase in it and I'll say hosting this is a brand new application which is not connected at all this will ask us more questions like is it an existing project is it a new project right so I'll say use an existing project that's fine then I have some projects already created on my Firebase so I can use any one of them for now I'll just use let's say angular crypto demo I had this application I'm not even using it now it's an old application so I'll just use this project now simply by running this command you have seen that we already connected our angular project with a Firebase project right now it is asking us where do you want to deploy from which directory will you have your files and where I can deploy I will say my directory is going to be something like this direct recall test and maybe I will have NG and then demo deploy now you can name this something else you can create your own folder so it really depends on you are you creating a single page application absolutely it's angular do you want to automatically deploy with GitHub this is an awesome feature but for now I don't want to use it because I'm just writing a basic application deploy things now the next thing is we are ready to deploy but we never built our angular applications so we have to run a command NG build and what this will do is this will take care of building or basically preparing our angular project to be deployed in production right so this is again a built-in angular feature you don't need to worry about it it will just compress our HTML files CSS files typescript files everything and it will make it ready to be deployed and there you go it's ready to be deployed now as you can see the name of the folder was demo deploy and not ngma deploy so what I need to do it I need to run Firebase in it hosting again and I need to give it the correct path because the path I gave it before was incorrect so I'll say best slash demo deploy so whatever your application whatever your computer is giving the path angular project is giving the path you just need to use the same path right can you override yes that's fine there you go now I'll just run NG build again just to be safe if everything is fine and I can delete the other photo that I'm no longer using that should be fine as well we are basically ready to deploy right it is as simple as that all we did was number one we created an angular application I'm assuming you already have one because you are trying to deploy one number two we must have a Firebase project right that we can use to connect our angular application with and finally all we need is uh to be able to build and then run this command Firebase deploy and that is it let's see what happens it already started deploying and now it's using the file that we provided it and there you go it is deployed already there's nothing else to do it also gives us a URL so let me just copy this go to my browser and see if it works and there you go on a real URL my application is working and it is live and it took us less than a couple of minutes to set everything up now what if I want to update my website and want to redeploy it right now I'll say deploy 2.0 right so if I go to my Local Host this should update so let me just run it quickly and show you that it actually updates or not so NG server will take a few seconds I'll skip past it and I'll show you the final response and if I go to my Firebase I should have the other project ready right so if I go here Firebase crypto demo and if I go to hosting it should show me the URLs I already connected there you go this is the URL right let's see there you go deploy 1.0 it's already connected so easy I really love the Simplicity of this process now where was I let's see if I have deployed 2.0 on my local there you go on my localhost I have deployed 2.0 now how can I deploy this again all I need to do is run NT build because now I have a new build my HTML or my JavaScript or something has changed in my Android project so I just need to rebuild it which will take a few seconds and then I need to run Firebase deploy which will deploy everything let me show that to you in a couple of seconds one this runs there you go that is complete I'll say Firebase deploy one two three four five let's go in five seconds it's ready let me go to my real URL and check it out it's not updated yet so sometimes it can take a few seconds to show what you actually deployed to be ready to use Let me refresh the website so it's loading right now I think the build is being deployed so maybe Firebase can take a couple of seconds to complete that and there you go Firebase deployed my anger application successfully deployed 2.0 so I just showed you how to connect a Firebase application with Android then add hosting to it then build your application and then finally deploy it once all of that is done I also showed you how you can redeploy by basically changing something in your code and then seeing the effect in less than a minute and I think that is awesome and I really love it because it's so simple that I really like it right and now Firebase has other features as well that I'm already using in my real application my real project like database authentication so much more but I hope you learned something new I hope it helped you deploy your Android application let me know in the comments below if you had any questions or any concerns or if you just like the video let us know that in the comments down below as well thank you very much again for watching and have a wonderful day bye [Music]

Channel: Kritika & Pranav | Programmer Couple

Views: 4,958

Keywords: web developers, job interviews, web dev, web developement, javascript, angular, react, reactjs, nodejs, docker, coder girl, learn web developemtn, learn web development

Id: L5TIOOaXrbo

Length: 8min 24sec (504 seconds)

Published: Mon Oct 31 2022