Deploy Angular Application to Firebase hosting for free

Поділитися
Вставка
  • Опубліковано 2 лис 2024

КОМЕНТАРІ • 110

  • @constanzalafuente5854
    @constanzalafuente5854 4 роки тому +2

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

  • @bluerose234
    @bluerose234 3 роки тому +3

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

    • @StudyMash
      @StudyMash  3 роки тому

      Hahaha, seems I said perfect after many days.

    • @mabos555
      @mabos555 3 роки тому +2

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

  • @wahidahmed1133
    @wahidahmed1133 2 роки тому +1

    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

  • @missphantomhive2796
    @missphantomhive2796 3 роки тому +5

    This video was a lifesaver! subscribed!

  • @ayushbhardwaj6783
    @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
      @StudyMash  Рік тому

      Glad to hear that

    • @umeshshelke725
      @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
    @AkhilChintuAkhil 3 роки тому +1

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

  • @weggievillarante1029
    @weggievillarante1029 3 роки тому +1

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

    • @StudyMash
      @StudyMash  3 роки тому

      Wow, that's great 👍

  • @rtech8779
    @rtech8779 3 роки тому +1

    thanks for easy steps deployed in 10 mins.

  • @mrtrader3661
    @mrtrader3661 Рік тому

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

  • @tanajipatil9856
    @tanajipatil9856 Рік тому +1

    Got the Good knowledge thank you,

  • @RACKEEPTEACHER
    @RACKEEPTEACHER 4 роки тому +1

    I like this tutorial, best regards from Mexico

  • @dingoo1971
    @dingoo1971 3 роки тому +1

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

  • @yuvaraj14598
    @yuvaraj14598 3 роки тому +1

    Thank you so much sir! Finally worked sir

  • @leolizanon2503
    @leolizanon2503 4 роки тому +1

    This works absolutely great! Thanks a lot! ;D

  • @anonymousbrand8819
    @anonymousbrand8819 3 роки тому +1

    thx dear this video was very helpful for me

  • @sofiatofigh4164
    @sofiatofigh4164 4 роки тому +1

    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
      @StudyMash  4 роки тому

      You need to rebuild before deploy

  • @luiscuyapuertas2606
    @luiscuyapuertas2606 Рік тому +1

    awesome video, i like

  • @anshulsharma4667
    @anshulsharma4667 3 роки тому

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

  • @md.mehedihasan5849
    @md.mehedihasan5849 4 роки тому

    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.

  • @mdev5446
    @mdev5446 4 роки тому +1

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

  • @tanajipatil9856
    @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
      @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

  • @amanbarnwal6668
    @amanbarnwal6668 4 роки тому +1

    Thanks a lot for this great video :)

  • @jaymarsplanet5208
    @jaymarsplanet5208 2 роки тому

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

  • @Tournesol143
    @Tournesol143 4 роки тому +1

    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
      @StudyMash  4 роки тому

      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 sandeep@studymash.com

  • @lakhanpundhir3407
    @lakhanpundhir3407 2 роки тому

    great Vedio! was very helpful

  • @satyamverma6029
    @satyamverma6029 2 місяці тому

    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
      @StudyMash  2 місяці тому

      Let me know how can I help.

    • @satyamverma6029
      @satyamverma6029 2 місяці тому +1

      Sir I changed it in my project

    • @StudyMash
      @StudyMash  2 місяці тому

      @@satyamverma6029great

  • @umeshshelke725
    @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
      @StudyMash  Рік тому

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

    • @umeshshelke725
      @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
      @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

  • @GraphicalBoss
    @GraphicalBoss 2 роки тому

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

    • @StudyMash
      @StudyMash  2 роки тому

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

    • @fridi419
      @fridi419 2 роки тому

      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?

  • @umerali1807
    @umerali1807 3 роки тому +1

    thanks for this vedio

  • @Kegooo95
    @Kegooo95 3 роки тому

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

    • @StudyMash
      @StudyMash  3 роки тому +1

      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
      @Kegooo95 3 роки тому

      @@StudyMash thanks!

  • @ZenOfTube
    @ZenOfTube 3 роки тому

    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
      @StudyMash  3 роки тому

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

    • @ZenOfTube
      @ZenOfTube 3 роки тому

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

    • @StudyMash
      @StudyMash  3 роки тому +1

      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
      @ZenOfTube 3 роки тому

      @@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
      @ZenOfTube 3 роки тому +1

      @@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).

  • @nguyenlam6266
    @nguyenlam6266 2 роки тому

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

  • @dreamer6228751
    @dreamer6228751 3 роки тому

    Great thanks 😊

  • @noobtube5555
    @noobtube5555 3 роки тому

    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
      @StudyMash  3 роки тому

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

  • @nehemiahlimocheburet1411
    @nehemiahlimocheburet1411 3 роки тому

    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
      @StudyMash  3 роки тому

      Look like you have defined bhk as string

    • @nehemiahlimocheburet1411
      @nehemiahlimocheburet1411 3 роки тому +1

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

  • @raisingkyle6695
    @raisingkyle6695 4 роки тому

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

    • @StudyMash
      @StudyMash  4 роки тому

      Seems you have overwritten index.html while initializing the setup

  • @lakshmansamanth
    @lakshmansamanth 3 роки тому

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

  • @9525092320
    @9525092320 3 роки тому

    thank u very much

  • @Tournesol143
    @Tournesol143 4 роки тому

    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
      @honeymilktea07 5 місяців тому

      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

  • @TechnicalSeta
    @TechnicalSeta 3 роки тому

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

    • @StudyMash
      @StudyMash  3 роки тому

      It look like you have not selected correct folder for deployment

    • @ajadimuhammed1475
      @ajadimuhammed1475 3 роки тому

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

  • @adarshsingh3012
    @adarshsingh3012 3 роки тому

    very good!

  • @sahiku5357
    @sahiku5357 Рік тому

    does it only support static websites ?

    • @StudyMash
      @StudyMash  Рік тому +1

      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
      @sahiku5357 Рік тому

      @@StudyMash thnx

  • @harishkeerthi6697
    @harishkeerthi6697 4 роки тому

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

    • @StudyMash
      @StudyMash  4 роки тому

      Are you getting any error ?

  • @umeshshelke725
    @umeshshelke725 Рік тому

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

    • @StudyMash
      @StudyMash  Рік тому +1

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

    • @umeshshelke725
      @umeshshelke725 Рік тому

      @@StudyMash sure thanks 😊

    • @StudyMash
      @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
      @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
      @StudyMash  Рік тому +1

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

  • @jaypatel-dr9fk
    @jaypatel-dr9fk 4 роки тому

    Nice..