How to Deploy an Angular App to Firebase: Step-by-Step Guide

hello everyone and welcome to my channel my name is babatunde in today's video I'm going to show you how to deploy an angular application to Firebase step by step Firebase is a great platform for hosting web applications and it's very easy to set up so let's get started the first thing you need to do is to create a Firebase account and you can do this by going to the Firebase website and signing up for a new account once you've created your account then you need to create a new project so we are here right here on the Firebase website so I'm going to create a new project so I'm going to give this project a name like Firebase deploy right then click on continue to turn off these guys then click on create project once your project has been created successfully you get this message your new project is ready click on continue when you click on continue you are taken to this particular dashboard where you can manage your Firebase deploy app the next thing we need to do is to install the Firebase tools all right right here I have an angular application to create a new angular application you just do a G new then the name of the application you want to create so for this particular application the name is Firebase deploy to see it let's just go to our console for to 200. all right so we have this simple application running on a local host now we want to deploy this application to Firebase so what do we do right so you need to install the Firebase too so you do npm install G Firebase Tools in your terminal I have it already installed so there's no need for this so I'm going to clear this out the next thing I'm going to do is to build my angular app to build the angular app you can see the command right here in your package.json and that is npm run build so I'm going to npm run build is going to build my app for me what this build is going to do it's it's going to create a production version of your app in the text folder you can see we have the disk folder right here and the name of that the name inside this folder is called Firebase Dash deploy this is what we are going to deploy to Firebase all right so once that is done the next thing we need to do is to log into our Firebase so I'm going to do Firebase login all right so I'm already logged in if you are on another account and you wish to log in with another account you can do Firebase login so that is going to allow you to sign in or log in with a new account or new email account all right so without going to do that we already logged in so let's proceed and there are some other tools you can use as well um in the in the CLI so you can do Firebase login add to add a new account new email or you can do Firebase Firebase okay Firebase login then list to see the list of email addresses that you have logged in with and the Firebase account and you can also do Firebase login use okay so the next thing we need to do now is to initialize our Firebase project clear my console to do that you do Firebase in it so once you do Firebase in it you just need to interact with your terminal so I'm going to pick hosting configure files for for Firebase hosting setup GitHub option that's optional so space Tab and tap then use an existing project so it's going to bring up the project we recently created which is Firebase deploy so click on enter and what do you want to use as a public directory remember we said that when we run NG build it created a production production file for us so production folder for us it is this folder that we're going to include right here so do this slash Firebase Dash deploy all right then configure as a single page app rewrite all URS to index I'm going to do yes then set up automatic builds we say no for this and do we want to overwrite I will say no is it a Firebase initialization is complete the next thing we need to do right now is to deploy our Firebase app so to do that you do Firebase Dash Firebase deploy okay so let's click on this right here open right so we have successfully deployed our Firebase our application to Firebase very simple quick and easy and that's it you have now successfully deployed your angular app to Firebase hosting I hope you found this video helpful if you have any questions please leave a comment below don't forget to like And subscribe for more videos like this and thank you once again for 1000 subscribers keep learning thanks for watching catch you on the next one stay safe bye for now

Channel: Babatunde Lamidi

Views: 13,009

Keywords: Angular development, web app deployment, app hosting, Firebase platform, Google Firebase, Firebase project, Firebase tutorial, Firebase deployment, Angular deployment, Firebase configuration, app deployment, Firebase setup, Angular Firebase hosting, Firebase cloud hosting, Firebase app deployment., how to deploy, how to deploy angular to firebase, angular + firebase, angular tutorial for beginners

Id: UNCggEPZQ0c

Length: 7min 0sec (420 seconds)

Published: Mon Apr 03 2023