Deploying Angular Apps with GitHub Pages

Today I was playing with GitHub pages for an app I was working on and wanted to write about it.

I originally used GitHub pages last year, but back then people were saying that it had limited resources and could just do static hosting. Today I found out that they were wrong! It is totally possible to host your Angular App with GitHub pages. I’m going to walkthrough my experience.

For reference, the app that I’m going to be talking about can be viewed here. The source code for this app can also be viewed here.

So the app that I’m working with is Angular 7. There are differences based on versions before 6 (and obviously just using AngularJS).

I’m using the NPM package angular-cli-ghpages.

First go ahead and do an install globally with:

npm install -g angular-cli-ghpages

You don’t have to do this, but it helps just to have it globally. I also went ahead and installed it locally to my project with:

npm i angular-cli-ghpages --save-dev

Now with that installed, its just a matter of (1) building your project and then (2) uploading it to GitHub pages.

As I mentioned in the intro, the version of Angular makes a difference based on what you’re trying to do. For Angular 7 I needed to make sure that the base URL that is used by Angular was set to what GitHub pages will use for any pages and assets.

The basic convention for this new baseURL is:

https://<user-name>.github.io/<repo>/

I created an NPM script for my project for this command, but my “build” command ended up looking like this:

ng build --prod --base-href https://andrewevans0102.github.io/angular-telegraph/

Once you’ve got it built, now its just a matter of deploying. The docs on the angular-cli-ghpages site say just to use the npx command. For Angular 7 you also need to specify the “dist” directory since thats what the “ng build –prod” puts the packaged code in. Earlier versions of Angular didn’t have this requirement.

So for my project I also created an NPM script for the “deploy” phase and it looked like the following:

npx ngh --dir=dist/angular-telegraph

So once you do that you should be able to view your page at a URL similar to the following:

https://<username>.github.io/<repo>/

I also found I had some issues with images. The app that I’m working with is small and only has 1 image, but in my Angular Component I was making the “img” element source go directly to where it was in the project (i.e. “../../some/place.png” instead of just using the relative “./” locator. In doing some Googling I found a lot of people had similar issues. Most of the time it was literally just needing to remove a backslash or something. These type of errors are easily debugged since the GitHub page is just pulling the code files directly from your repo.

When you push the code into GitHub pages a branch gh-pages is created which is where you can see the code that is deployed. Having this custom branch makes it easy to see and resolve location errors.

Hopefully this post helped you get started with GitHub pages and Angular. I used the following two pages for help:

4 thoughts on “Deploying Angular Apps with GitHub Pages

  1. Hi – thanks for your blog, very helpful.

    The link to your demonstration does not work because your URL needs to be changed:
    was: https://andrewevans02.github.io/angular-telegraph/
    should be: https://andrewevans0102.github.io/angular-telegraph/

    When I go to the corrected URL the Angular application does work because the “base”
    also needs to be updated:
    was: base href=”https://andrewevans02.github.io/angular-telegraph/”
    should be: base href=”https://andrewevans0102.github.io/angular-telegraph/”

    thanks again
    malc.

    Like

    1. Thank you Malcolm. I recently switched my GitHub username, and was still resolving some of the endpoints. I just cleaned up this post and also the repo tonight. Everything should be in working order now. Thanks for reading and your message!

      Like

  2. Hi – thanks for a great blog and fixing the URL so it works again.

    I notice that the image ‘Radio Signal.png’ does not display correctly on my Chrome browser,
    looking at the code I think that you might want to try the following change:

    file: angular-telegraph.component.html
    line 9 was: img src=”../../assets/Radio Signal.png”
    should be: img src=”./assets/Radio Signal.png”
    Debugging the application with Chrome shows that it does not access
    the ‘assets’ folder when using ‘../../’.

    I hope this helps.
    thanks again.
    malc.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s