Deploying An Angular App on GitHub

tldr; use angular-cli-ghpages:

npm i -g angular-cli-ghpages
ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/"
ngh

Hey fellow coders!

We decided to open-source our Angular Landing Page entry from the Angular Attack hackathon on GitHub. We had deployed the app to to Azure and firebase for the competition. A couple of days after, we also deployed again to Azure for it to replace our main landing page. Since we were now putting the code on GitHub, we thought it would be fitting and a great idea to finally check out and deploy to GitHub Pages!

Initially, we went straight to the source and checked out the video on https://pages.github.com/, and then following tutorials after the video. We went to the repo settings and updated the GitHub Pages — Source — branch settings, but we did not really understand how to get/map the built “dist” folder to the right branch.

We checked google, StackOverflow, and we discovered the Angular CLI actually used to have this functionality built-in with “ng github-pages:deploy”! After trying it with no luck and checking “ng help”, we found a thread about it being removed here and finally it mentioned to check out the angular-cli-ghpages project.

In the end, it was just a matter of 3 commands listed at the top of the blog. You can check out the deployed GitHub Page here: https://ninjacodegen.github.io/angular-landing-page/

Make sure the gh-pages branch is selected in the repo’s settings

#MCFA Make Coding Fun Again!

Let’s go play with some code!