How to Deploy an Angular App to GitHub Pages (like a PRO)
How to Deploy an Angular App to GitHub Pages (like a PRO)
Welcome to my channel. In this episode you will learn how to deploy an Angular app to Github Pages in very quick and simple steps without using any libraries.
Essentially Github Pages lets you host your application directly from your GitHub repository.
Content
2.16 -> Hello everyone what's up what's up welcome
to my channel my name is Babatunde in today's
8.28 -> video we want to look at how you can deploy
your angular application to GitHub pages.
14.22 -> So essentially GitHub Pages lets you host
your application directly from your GitHub
20.7 -> repository and that's it so basically this
is going to be a very quick tutorial and I
27.6 -> just want to say a very big thank you to all
of my subscribers we are at 164 right now we
33.06 -> are moving! we are moving! and that is good. So
what you want to do first is to go to your GitHub
40.5 -> profile and right here I'm going to create
a new repository I'm going to call this
47.82 -> repository ng-deploy right it's going to
be public no read me create repository
59.94 -> All right so I'm just going to copy this
right here quick setup if you have done
65.28 -> this kind of thing before so we're going
to copy this link here just click on copy
71.34 -> and I'm going to come over here and do git clone
79.62 -> clone our repository and let's CD into our
repository ng-deploy and there is it so if
91.68 -> I do it ls there's nothing in it so I'm
going to create a new angular application
98.04 -> in this directory in this folder all right so I'm
going to ng new I'm going to call this ng-deploy
107.46 -> right and --directory ./
115.32 -> All right no CSS and application is installing
the packages all right this is taking a while
130.86 -> how you're doing by the way how's how's the
holiday been hope you are learning a lot
136.68 -> and um keep doing what you're doing all right
this is like a brief interlude while we wait
146.34 -> for uh application to finish installing
okay so we are done so let's open this up
166.74 -> okay this is a simple application um first
of all going to go to the package.json
174.3 -> and let me just run this npm run
start okay so let's go over here
182.58 -> and load our application okay our application
ng-deploy is running fine that's good
192.54 -> and let's go back to uh up so what we want
to do basically is to go to our angular.json
202.68 -> as you can see right here we have our
foot path set to this / ng-deploy
209.88 -> uh we just need to add a simple command that is
going to build the application to an output path
218.34 -> that we're going to set and it's going to set
the name of our href to be ng-deploy all right
226.32 -> so I'm going to come over here and do ng-build
output path our output path is going to be docs
236.82 -> and you can give it any name you
want this basehref is going to be slash
242.28 -> ng-deploy essentially the name of a
Git Up repository the name for a GitHub
253.44 -> repository is ng-deploy all right so
ng-dash deploy and I'm going to hit on OK
265.74 -> right so our application is here we
can see the new folder generated for
272.64 -> us by ng-build and if I go to index.html we
can see it has the href set to enter deploy
281.82 -> and I'm going to push this right now
get I'm just doing it project init
292.86 -> let's push this gets push all right so let's come
back to our GitHub repository just reload this
302.82 -> okay we have our application here one one thing
we need to do is we need to go to our settings
310.26 -> on the settings you click on the pages
315.72 -> um the pages on the on the side pane
318.72 -> and deploy from your branch we're going to select
the branch to be main and we are going to select
325.44 -> it to be docs the outputpath we created
in our application so I'm going to save this
335.88 -> and this should be loading one way to
check is to come to our ng-deploy page
345.54 -> okay is back here uh GitHub pages
351.24 -> just going to refresh this oh okay so it's done
let's click on view deployment and voila we have
359.76 -> our application running fine we have successfully
deployed our angular application to GitHub pages
369 -> from our GitHub repository fantastic very
quick and simple okay that's it for this
376.14 -> tutorial please like the video subscribe to the
channel and see you on the next one bye for now
Source: https://www.youtube.com/watch?v=F3HbnbT1Maw