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