How to deploy Angular app on GitHub Pages?

I have developed this simple Todo App in Angular which I am going to deploy on GitHub Pages.

First you need to put your local code into the github.com so if you don’t have github account you need to create it first.

Now create github repository in which you will upload your local code.

Assuming you have git installed on your machine and you have already committed your code in the local master branch.

Open the git bash on the app folder and run above commands to upload your code on github.

Now refresh your github repository and check your code is pushed into github.

Now we need to build our code in production mode in order to create distributable files that will be deployed on github pages. By default this deployable code generated in the /dist/prodect-name        folder but we need to generate this in the “docs” folder under the app folder.

So we need to make a small change in the angular.json file and change the outputpath value to            “docs/” as shown below and save the changes.

Another point to be noted is the URL of your going to be hosted app on the github pages.

This default site name on the github pages would be https://username.github.io/respositoryname

Now run following comman on the git bash window to generate distributable files in the docs folder.

ng build - -prod - -base-href=” https://username.github.io/respository-name/”

Note – replace the username and repository-name with your github username and repository.

Go to your app folder and check docs folder is created that contains all the distributable files.

Now commit this folder into local repository and also push it into the github.

Once docs folder is pushed into you github repository you need to open the repository settings and go to the Github Pages section and select “master branch/docs folder” from Source dropdown.

Now open the github page url of your deployed app in the browser window to check successful deployment of your app on the github pages.

Here is the URL of this app - https://sanjaysaini2000.github.io/angular-todo-app/

There is  another method to deploy you Angular app only on github pages using angular-cli-ghpages package that you can google for more details but personally I find this approach better and clear than using that packages.