How to Deploy an Angular App to GitHub Pages (like a PRO)

Hello everyone what's up what's up welcome  to my channel my name is Babatunde in today's   video we want to look at how you can deploy  your angular application to GitHub pages.   So essentially GitHub Pages lets you host  your application directly from your GitHub   repository and that's it so basically this  is going to be a very quick tutorial and I   just want to say a very big thank you to all  of my subscribers we are at 164 right now we   are moving! we are moving! and that is good. So  what you want to do first is to go to your GitHub   profile and right here I'm going to create  a new repository I'm going to call this   repository ng-deploy right it's going to  be public no read me create repository All right so I'm just going to copy this  right here quick setup if you have done   this kind of thing before so we're going  to copy this link here just click on copy   and I'm going to come over here and do git clone clone our repository and let's CD into our  repository ng-deploy and there is it so if   I do it ls there's nothing in it so I'm  going to create a new angular application   in this directory in this folder all right so I'm  going to ng new I'm going to call this ng-deploy   right and --directory ./ All right no CSS and application is installing  the packages all right this is taking a while how you're doing by the way how's how's the  holiday been hope you are learning a lot   and um keep doing what you're doing all right  this is like a brief interlude while we wait   for uh application to finish installing  okay so we are done so let's open this up okay this is a simple application um first  of all going to go to the package.json   and let me just run this npm run  start okay so let's go over here   and load our application okay our application  ng-deploy is running fine that's good   and let's go back to uh up so what we want  to do basically is to go to our angular.json   as you can see right here we have our  foot path set to this / ng-deploy   uh we just need to add a simple command that is  going to build the application to an output path   that we're going to set and it's going to set  the name of our href to be ng-deploy all right   so I'm going to come over here and do ng-build  output path our output path is going to be docs   and you can give it any name you  want this basehref is going to be slash   ng-deploy essentially the name of a  Git Up repository the name for a GitHub   repository is ng-deploy all right so  ng-dash deploy and I'm going to hit on OK right so our application is here we  can see the new folder generated for   us by ng-build and if I go to index.html we  can see it has the href set to enter deploy   and I'm going to push this right now  get I'm just doing it project init let's push this gets push all right so let's come  back to our GitHub repository just reload this   okay we have our application here one one thing  we need to do is we need to go to our settings   on the settings you click on the pages um the pages on the on the side pane   and deploy from your branch we're going to select  the branch to be main and we are going to select   it to be docs the outputpath we created  in our application so I'm going to save this and this should be loading one way to  check is to come to our ng-deploy page okay is back here uh GitHub pages just going to refresh this oh okay so it's done  let's click on view deployment and voila we have   our application running fine we have successfully  deployed our angular application to GitHub pages   from our GitHub repository fantastic very  quick and simple okay that's it for this   tutorial please like the video subscribe to the  channel and see you on the next one bye for now

Channel: Babatunde Lamidi

Views: 12,325

Keywords: how to deploy angular app to github pages, how to deploy an angular app to github pages, angular app to github, angular, quickest way to deploy angular app to github pages, Angular, Angular tutorial, AngularJS, JavaScript framework, Web development, Front-end development, Single page application, TypeScript, Angular CLI, MVC framework, JavaScript, HTML, CSS, Front-end, Beginner tutorial, Programming tutorial, Web app development, Angular components, Angular services

Id: F3HbnbT1Maw

Length: 6min 25sec (385 seconds)

Published: Wed Dec 28 2022