Deploy Angular Application to Firebase hosting for free

[@constanzalafuente5854]

Great video! It was so easy to deploy my project this time. Thank you so much!

[@wahidahmed1133]

Sir, So so many thanks for you tutorial and teaching method. I have done the angular project successfully. i have learnt a lot from you. so many thanks

[@bluerose234]

I always wait for him to say, 'PERFECT'......That puts a smile on my face !

[@StudyMash]

Hahaha, seems I said perfect after many days.

[@mabos555]

@@StudyMash I love the "PEEEEEEEEEERFECT" part. funny and fun to learn that way

[@missphantomhive2796]

This video was a lifesaver! subscribed!

[@ayushbhardwaj6783]

You are a live saver. I tried lot of things like heroku and github pages. Nothing was working but this worked perfectly. Thanks a lot

[@StudyMash]

Glad to hear that

[@umeshshelke725]

​@@StudyMash but how you deployed >net core apI code on firebase ? and what about sql server database ? I didn't understood how your application is working without deploying .Net code and connecting to sql server db

[@AkhilChintuAkhil]

Thanks mate, it helped me to host my website. Was confused at the step public/dist folder. Thanks again!

[@RACKEEPTEACHER]

I like this tutorial, best regards from Mexico

[@weggievillarante1029]

Thank you so much. Now I have a free website where I can demo may project temporarily to clients.

[@StudyMash]

Wow, that's great 👍

[@dingoo1971]

perfect, exactly what i was looking for, thank you!

[@rtech8779]

thanks for easy steps deployed in 10 mins.

[@leolizanon2503]

This works absolutely great! Thanks a lot! ;D

[@mrtrader3661]

have we dealt with this link in the property card? ?

[@md.mehedihasan5849]

Your Tutorial is very useful. I already watched all videos of this playlist. Please try to do complete this tutorial series very fast as soon as possible.

[@yuvaraj14598]

Thank you so much sir! Finally worked sir

[@tanajipatil9856]

Got the Good knowledge thank you,

[@nguyenlam6266]

they dont have that option anymore 5:54, please help

[@anonymousbrand8819]

thx dear this video was very helpful for me

[@mdev5446]

Thank you very much from France . Quite intense though. ;)

[@amanbarnwal6668]

Thanks a lot for this great video :)

[@anshulsharma4667]

If I use firebase databae in my projects ...which option I have to choose ....data base or hosting site's

[@luiscuyapuertas2606]

awesome video, i like

[@satyamverma05]

Sir i found an issue we have to add pipe that should convert lower case letter to upper case in the search option for city name. Kindly get back to me on this

[@StudyMash]

Let me know how can I help.

[@satyamverma05]

Sir I changed it in my project

[@StudyMash]

@@satyamverma05great

[@umeshshelke725]

​ @Study Mash but how you deployed .net core apI code on firebase ? and what about sql server database ? I didn't understood how your application is working without deploying .Net code and connecting to sql server db

[@StudyMash]

API and SQL is deployed on Azure, only frontend was deployed on firebase

[@umeshshelke725]

@@StudyMash will it woked ? I mean application will work ? do you know any free platoform where I can deploye my code both front and back end and sql ? azure is not free now it free for 30 days only

[@StudyMash]

As mentioned in my previous message, I did not deploy api on firebase, it was deployed on Azure. If you want both on firebase, better you use firebase nosql database, that is free

[@jaymarsplanet5208]

what if I made changes in my codes using vscode? should I go back those steps procedure to deploy once again?

[@StudyMash]

Yes

[@GraphicalBoss]

What happens to the backend folder 📂, shouldn't we host that too specially if it's connected to a DB like MongoDB 🤔?

[@StudyMash]

Not aware about mongodb but here in this tutorial I am going to host backend part on seprate server (azure).

[@fridi419]

i dont think so if u use mlabs or something its a seperate url that gets called via your service in the angular so a http.. which gets all ur json data?

[@lakhanpundhir3407]

great Vedio! was very helpful

[@nehemiahlimocheburet1411]

I am not getting the reason why [Am using angular 11]. error TS2322: Type 'number' is not assignable to type 'string'. 34 class="btn btn-outline-primary mr-2" [btnRadio]="bhk" tabindex="0" role="button"

[@StudyMash]

Look like you have defined bhk as string

[@nehemiahlimocheburet1411]

@@StudyMash not really. but i noted it is something todo with strictcompilation in the tsconfig.json, i have solved it though, thank you

[@tanajipatil9856]

Hello sir, I implemented the website in angular with Data Base and Core Web API's, how to host my dynamic website work including data base, Core API's AND angular code. can u suggest how to host it Thank you in advance.

[@StudyMash]

Hi Tanaji, I already have video on the same in my angular tutorial playlist, kindly watch the same or let me know if you are unable to find that video

[@sofiatofigh4164]

Thanks for the video - very helpful ! I just want to check, if we make changes to our app we need to first create a new build and then firebase deploy again? Or just firebase deploy?

[@StudyMash]

You need to rebuild before deploy

[@raisingkyle6695]

Hi, why is it always redirecting me to this page "Welcome Firebase Hosting Setup Complete"?

[@StudyMash]

Seems you have overwritten index.html while initializing the setup

[@umeshshelke725]

what are the steps to run this project on angular cli ?

[@StudyMash]

Give me some time, I will take a look and let you know

[@umeshshelke725]

@@StudyMash sure thanks 😊

[@StudyMash]

I just tried to clone fresh version of my code and tried npm install with latest node package. It is returning lot of vulnerability. As this application was updated until angular 11 and it seems many of dependency has become outdated. I tried to upgrade application to angular 15 and it is working fine without any problem at my end now. I will commit my latest code on git on a different branch until I am not sure if this is working fine for all functionality. I recommend you to start building app using latest CLI and follow the steps as mentioned in tutorial. I am not sure if your experienced angular developer or you just started to learn angular. If you are beginner then best to start with latest cli and follow the steps in my tutorial. If you are already an experienced developer and just want to run ny project, you need to update app to latest angular version using ng update command. Feel free to let me know if you have any questions or need any help, we can do a zoom call.

[@umeshshelke725]

@@StudyMash Thanks a lot for your help and support . I am experienced . I tried upgrading angular version in your app but some how it is not working . can we have a zoom call tomorrow ?

[@StudyMash]

@@umeshshelke725 tomorrow i am out of station, we can connect day after tomorrow @8 pm if it will work for you?

[@Tournesol143]

I didn't receive the prompt to allow Firebase to collect CLI usgae and error reporting. I got the below instead. $ ng add @angular/fire Installing packages for tooling via npm. Installed packages for tooling via npm. UPDATE package.json (1631 bytes) ✔ Packages installed successfully. ✔ Preparing the list of your Firebase projects ? Please select a project: hspa (hspa-angular-10) UPDATE angular.json (3817 bytes) UPDATE firebase.json (900 bytes) UPDATE .firebaserc (190 bytes)

[@honeymilktea07]

same here, what did you do in this case? I am getting a list of options to select ( ) Authentication >( ) Google Analytics ( ) App Check ( ) Firestore ( ) Realtime Database ( ) Cloud Functions (callable) ( ) Cloud Messaging @StudyMash, I am not getting the prompt where it asks the authorization code

[@deepika4101]

What option did you select here ?​@@honeymilktea07

[@noobtube5555]

Hello, so I managed to get my domain hosted but I wanted to try and make changes and redploy to see it in action. So I made a simple text addition on the propert list page, ran the ng build --prod and then ran ng deploy. However no change is reflected? Did I execute the redeployment wrong, if so what was the mistake?

[@StudyMash]

Some time changes doesn't reflect immediately, did you try to refresh page after some wait ?

[@TechnicalSeta]

I am getting Firebase Hosting Setup Complete page instead of my angular app page.... what can be a problem?

[@StudyMash]

It look like you have not selected correct folder for deployment

[@ajadimuhammed1475]

@@StudyMash I'm also getting same error instead. What could be a possible solution to that?

[@harishkeerthi6697]

it showing deploy is completed. but not getting my UI through that given link

[@StudyMash]

Are you getting any error ?

[@dreamer6228751]

Great thanks 😊

[@umerali1807]

thanks for this vedio

[@sahiku5357]

does it only support static websites ?

[@StudyMash]

No, you can curate dynamic as well with database integration as well. You can see my complete series on it, I have covered all these things

[@sahiku5357]

@@StudyMash thnx

[@lakshmansamanth]

Sandeep, after deploying my CSS has changed, they are different behaviour after deploying

[@StudyMash]

What is changed

[@Kegooo95]

This video is great, but I have one question: if I have my back-end in spring, how can I do?

[@StudyMash]

I have not worked on spring, but if you can use spring to create rest api, you can use spring and integrate angular app to use those api endpoint using service in angular.

[@Kegooo95]

@@StudyMash thanks!

[@Tournesol143]

Hi ​​ @Study Mash - I've been really enjoying your video tutorial, As an aside, I do a lot of tech reviewing for Manning. I was going to email you but couldn't find your address.

[@StudyMash]

Hi Rich, glad to hear that you are enjoying this tutorial. At the end of each video I have provided my email and my site link. My email address is [e-mail]

[@ZenOfTube]

Hi again Sandeep - I love how easy it is to deploy to Firebase. I have one issue (and perhaps someone else did as well but they did not elaborate on their css issues) where the css for the buttons does not work on the deployed app (but does work locally.) Specifically it is the .btn-group class for labels: border-radius: 45px; Any idea how to fix this? My deployed buttons do not have the rounded look.

[@StudyMash]

Hi, I did not get any of such issue, can you share the URL of your deployed app

[@ZenOfTube]

@@StudyMash Sure, it's sellorrentyourhouse.web.app and again, it works locally but not online ¯\_(ツ)_/¯

[@StudyMash]

I can see it is converted to rem instad of px, If I am changing it to 45px, it is appearing correctly in your deployed app. I will look at this later today and get back to you.

[@ZenOfTube]

@@StudyMash Looking at all the other links on this page (to people's deployed apps) I saw that every single one has the same issue. I'll try to figure it out as well, but I am stumped for now.

[@ZenOfTube]

@@StudyMash If I add a border-radius of 45px to .btn it works in the deployment, so I think the .25rem is inherited from the bootstrap css for .btn. That fixes it for Firebase, but I am not sure if that is necessary in other deployment environments (because it does work on localhost).

[@adarshsingh3012]

very good!

[@9525092320]

thank u very much

[@jaypatel-dr9fk]

Nice..