Publish Angular App To Google Firebase - Easy Angular Website Hosting with Google Firebase

hey youtube in this video we will publish our angular application to the internet and we will use google firebase as our hosting provider hosting on google firebase is really easy and it's absolutely free the app that i'm going to host today is a student admin portal application which shows the list of students which the admin can filter sort and use pagination on the admin can also add a new student and update an existing one as well as uploading the image of the student from this application this lovely application is built with angular and has an asp.net core web api as its back-end it's talking to a sql server database using entity framework core i have a complete course on udemy where i create this full stack web application from scratch and also published this to microsoft azure and google firebase the link to the course is in the video description below and students who will use this link will get a staggering 90 discount so hurry up all right with that let's go ahead and publish this angular application let's browse to firebase.google.com and login to your google account once you're logged in click on the go to console button this will open console.firebase.google.com click on add project and give a name for your project click on continue and then continue from here as well click on here and select the account for yourself otherwise create a new account so i'll click on default account for firebase and click on create project this has created a new project for me and i'll click on continue on this page i will come over here and click on the web button to create a new app and i will give my app a name and i will click on register app after that i will skip this step and click continue to console from here i will go to hosting and i will click on the get started button it is asking us to install firebase cli so let's do that i will copy this command and we'll go back to my angular application and i've opened a terminal you can go ahead click on terminal to open a new terminal inside the application and i will paste that command over here and click enter make sure you have npm installed in your in your system firebase tools have now been installed so i'll go back to the browser and click next it's asking us to initialize our project so i will copy the firebase login command and go back to my terminal i will paste that command over here and click enter it's asking me for this collection of the cli usage i'll say yes and click enter again it has opened an authentication window to login to google's account so i'll use the same account that i used to create the project and i'll sign into here i will click allow to allow firebase cli to access my google account after that you can close this window and you come back to your account you can see that you're successfully logged into your gmail account after that you go back to the browser and the next step it is asking us to do is to firebase init so we will copy this command and come back to our application i will paste this here and click enter it is asking me to initialize within an existing firebase project directory i will click yes and from here it is asking me to which functions we want to use we just want to use hosting so i'll come down using the arrow keys and press space to select the hosting option and then click enter after that it is asking us which directory would you use as your public directory in angular i will use my test directory so i will mention dist and click enter it is asking me to configure as a single page application i will click yes and to setup automatic builds and deploy with github i will select no the firebase initialization process has now completed we can go back to our browser now and click next it is now asking us to deploy using firebase we will copy this command and we will come back to our application there is one extra step involved in publishing the angular directory it needs a dist folder that it can come to and grab all the files so i will first configure the output path i will come to angular.json and in here under the outputs folder over here the output path is mentioned as dist if you have anything else like the application name then remove that application name and it should just be this as your output path with that change i will come here and i will create a build as a production build for myself so i will say ng build hyphen hyphen broad the build has now completed and it has copied all the files it needs google firebase needs to host an angular application inside the disk folder so now we can go back to the browser and copy this command firebase deploy we'll come back to the application and paste the command here and click enter this is now deploying our angular application to google firebase so you can see that the deployment was successful and it has given us a hosting url i will copy this link and i will come back to my browser to open it up so i'll open a new tab and paste it as you can see our application has now been successfully hosted to google firebase and it has also given us a domain as well as you just saw hosting an angular application with google firebase is really easy and quick if you have any changes to your application you just have to rebuild your solution using ng build and then deploy the changes using firebase deploy i hope you liked this video press the like button if you did share this with your friends and subscribe to my channel to support i will see you all in the next one you

Channel: Sameer Saini

Views: 32,477

Keywords: Google firebase, google hosting, google web hosting, firebase hosting, firebase web hosting, Angular hosting, publish angular app, publish angular application, Host an angular app, deploy angular app, how to deploy angular app, deploy angular, host angular, publish angular, google firebase tutorial, firebase web hosting tutorial, angular, host angular app on firebase, host angular website, host angular project, google firebase free hosting

Id: dPIyS5R6lHU

Length: 6min 49sec (409 seconds)

Published: Mon Sep 20 2021