Deploying an Angular App to Github Pages

Github pages is a Github feature that allows you to host a static website or web app for free, and itโ€™s as simple as putting the files in a gh-pages branch of your projectโ€™s repository. The Angular CLI, along with a node package called angular-cli-ghpages make it even easier to deploy to Github pages.

This post covers deployment for Angular 2+ apps.

First install the angular-cli-ghpages globally:

$ npm install -g angular-cli-ghpages

Now use the Angular CLI with the --base-href flag to build your project and set the correct base href location:

$ ng build --prod --base-href "https://<user-name>.github.io/<repo>/"

Then itโ€™s as simple as running angular-cli-ghpages. You can use the ngh shorthand:

$ ngh

And done! Your app will now be hosted at https://username.github.io/app-name/

๐ŸŠ Alligator.io recommends

Our recommended Angular courses

You can optionally add a message to the commit when deploying:

$ ngh --message="First deploy"

You can also specify which branch to deploy:

$ ngh --branch=production

And finally, you can always do a dry run before actually deploying to see the output:

$ ngh --dry-run

Single-page web app fix

๐Ÿ‘‰ See this post from Back Halley Coder for a fix if youโ€™re having issues with directing all traffic to the index.html. Basically the fix is a simple script that uses Session Storage and a meta tag in the 404.html file that redirects to index.html and contains the data for the url that the user was trying to access.

  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#
#native_cta#