Angular 2, or just Angular as it’s now called, is new, exciting and constantly evolving. While it’s great to be on the cutting edge of a JS framework, the process can be extremely frustrating at times…
I’m currently working through “Angular 2 – The Complete Guide“, an Udemy course by Maximilian Schwarzmuller.
I wanted to take a quick break to test how much of the course has sunk in, so I went back and rebuilt my Random Quote Generator App from the Free Code Camp frontend projects. I picked this because it was fairly simple and I wanted to build an Angular project from creation to deployment without investing too much time.
Building the project was relatively quick and painless, which is a testament to Max’s course mentioned above. You can see my GitHub repo here (and the app finally deployed here). Given that it’s a static app (i.e. no backend), I figured GitHub pages would be a good place for deployment.
This is where the headache started… One of the inherent problems when working something like Angular, that’s constantly changing is that many of the resources become irrelevant and incorrect very quickly (this one, no doubt, included).
I found multiple blogs and Stack Overflow answers, some written only months ago, claiming that you could deploy to GitHub pages with the following one command:
|
1 |
$ ng github-pages:deploy |
After much frustration, and multiple attempts at rebuilding and redeploying, I found that the deploy command was removed from the angular-cli.
So the command written above certainly wouldn’t work. The functionality, however, is available through the angular-cli-ghpages npm package.
Before we proceed on how to use the angular-cli-ghpages package, there are a couple assumptions being made in this process that will need to be met if this is going to work…
First, I’m assuming that you have Node.js installed on your computer. If not, visit the Node.js site for instructions for download.
I’m also assuming that you have an Angular app, associated with a GitHub repo, written and ready to deploy… If not, go create something and commit it to GitHub!!
With those assumptions out of the way, input the following in a terminal to install the npm package globally:
|
1 |
npm i -g angular-cli-ghpages |
Once installed, you’ll need to build the app. In the app’s folder, run:
|
1 |
ng build --prod --base-href “https://USERNAME.github.io/REPOSITORY_NAME/” |
This will create a dist folder that contains the compiled code for your app. Obviously, you’re going to want to change the above command to include your GitHub username and the repo name.
Then deploy:
|
1 |
angular-cli-ghpages [OPTIONS] |
or just:
|
1 |
ngh [options] |
You can find all the options at the angular-cli-ghpages site.
This will deploy a new branch to your GitHub repo called gh-pages branch. Make sure you’re using this branch as the source for your app. You can find/change this option under the GitHub Pages section of the Settings tab of your repo.
It might take a few minutes for the app to show up on your page, be patient!
That’s it for now, I hope this was able to help.
-Jeremy
Prefer Heroku? Here’s a good article if you’re having trouble deploying a static angular app to heroku. The title says Vue, but it works great for angular now that they’re using webpack…