Sanjay Saini

Posted on Dec 22, 2019 • Edited on Jan 8, 2020 • Originally published at sanjaysaini.tech

How to deploy Angular app on GitHub Pages?

#angular #typescript #github #webdev

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

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.

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.

$ git remote add origin <your GitHub repository URL>
$ git push -u origin master

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

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/ 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/.

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.

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 repository as well by running following commands in the git bash window.

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

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

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

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.