Quickly deploy Angular CLI project to GitHub Pages

Deploying angular project to GitHub pages is simple and easy.

I assume that you already have a working Angular app ready to be hosted to GitHub pages and I also assume that you pushed the local repository to Github. If not, click the below link to follow the instructions for adding an existing angular project to Github.

https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/

Steps to deploy to GiHub pages

  • Open Terminal, change the current working directory to your local project.
  • Type the following command to install the npm package globally.
npm i -g angular-cli-ghpages
  • Next you need to build the app, to do that run the following command.
ng build --env=prod --base-href “https://username.github.io/repository_name/”
  • Change the above command to include your GitHub username and your repository name. The above command transpiles the typescript code to javascript so that the browser can understand. The compiled code is available in dist folder.
  • Then deploy using the following command which creates a new branch called gh-pages and pushes the complied code to the branch.
angular-cli-ghpages [OPTIONS]

You can now navigate to the url to see the project running, it might take few minutes for the app to become live.

Here is my Angular CLI project hosted to GitHub pages -https://swarnakishore.github.io/angular-github-pages/

Image representing the demo angular application hosted using github pages

And the gh-pages branch — https://github.com/SwarnaKishore/angular-github-pages/tree/gh-pages