How to deploy Angular app on GitHub Pages?
Tags: angular, typescript, github, webdev
Published: 2019-12-22 14:30:29

In this article I am going to share with you my learning while I was trying to publish my Angular app on the GitHub Pages. I found GitHub Pages very effective yet very easy platform to publish your websites. So in this article I am explaining the process the same way I published my app. 
I have developed this simple Todo App in Angular which I am going to explain how to deploy on GitHub Pages in these simple steps...

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sj4lt9x5phdo94f5zveb.jpg)

## Deploy your local repository on GitHub

GitHub Pages (https://pages.github.com/) provides very convenient way to deploy your static websites from your GitHub repository therefore you need to have an account on the GitHub.com in order to follow this article.

First you need to put your code in local repository into the remote repository at github.com so if you don’t have GitHub account you need to create it first now.

Now login to your GitHub account and create repository in which you will upload your local code. Here I created repository named **todo-app**.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/i56ak5i7s080e7d703ki.png)

Note down the URL of newly created repository that will be used to setup remote repository for your local repository in order to push your local repository code onto GitHub repository.

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

Open the git bash on the app folder and run below commands with your GitHub repository URL to upload your code on github.com repository.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/omok8z1nbhrf2qi7sgwz.png)
 
`$ git remote add origin <your GitHub repository URL> `
`$ git push -u origin master 
`

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wt891b1mjqj8pw9dd94x.png)

Refresh your GitHub repository and check your code is pushed into newly created  GitHub repository.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/je3p0h8r7pgev384vdin.png)
## Build your code to generate deployables

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 under the app 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/**.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p3ck73s1g58h4qgw9v4c.png)

Another point to be noted is the URL of your going to be hosted app on the Github Pages would be **https://username.github.io/respositoryname**.

Like in my case it would be *https://sanjaysaini2000.github.io/todo-app*.

This URL is needed to set the base URL of our website while generating the distributable files to deploy on GitHub Pages.

So now run following command with your website URL in the **base-href** option  in the git bash window to generate distributable files in the **docs** folder.

`$ ng build - -prod –base-href=” https://username.github.io/respository-name/” 
`
>username and repository-name will be your github username and repository name. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pcxdr6mwhsysoo14w2rw.png)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/66qsn8w78pqfx9mlvgne.png)

Now commit this folder into local repository and also push it into the GitHub repository as well by running following commands in the git bash window.

`$ git add .`
`$ git commit -m "generated deployables"`
`$ git push -u origin master 
`

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ggew1nviuswlwqlcslfp.png)

## Configure GitHub repository for Publishing on GitHub Pages

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 drop-down and that's it....

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b74hx8b576ezs0jtal38.png)

Now open the GitHub Pages URL of your deployed app in the browser window to check successful deployment of your app on the GitHub Pages.

Here's the [Link](https://sanjaysaini2000.github.io/angular-todo-app/) of this todo-app on GitHub Pages.

>I had to create another repository name angular-todo-app so dont get confused with different repository name in the URL of this site.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/i3hd9cpk3g8roazdovtv.png)
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.

Happy Reading...!!!