Deploy angular 5 app in Github pages

Hope you’re doing well.

I’ll show you how you can deploy your angular 5 app in github pages. Why? you know what? It’s free. And you can add your custom domain to it. That’s awesome, right? Yea of course.

1. Dependency

So first we’ll need to install a npm package called
angular-cli-ghpages
.You should install it globally as it has nothing to do with your project. It’s just a command line tool.
npm i -g angular-cli-ghpages
 

2. Build Project 

If you are using angular-cli you can just build your project for production by passing a –prod flag. use –base-href to pass a base url for your project.

ng build --prod --base-href "/REPOSITORY_NAME/"
This will build your project into /dist folder.

3. Publish on github Pages 

Just use this command to publish your build files to github pages

ngh --no-silent

and then go to your github repository->Settings->Choose gh-pages branch as source.

This should do the trick. If you want to keep using github pages domain.
But wait! aren’t we suppose to use our own domain? Yes.

4. Using Custom Domain

We can add our custom domain on custom domain box on repository setting. It’ll work fine. But the problem is, your project will be hosted on 
“example.com/repository_name” instead of “example.com”. 
We don’t want this.

So how can we solve this problem?

well use this command for building your angular app.
ng build --prod --base-href "/"

Setting / as base url, you can now use your custom domain. One problem there, if you use go to github pages link of your repository it won’t find the assets for your project as it looks from the relative path ‘/’ instead of ‘/repo/’. But when you add your custom domain it’ll work fine.

5. Publish

Need I remind you to push the build to github again after a new build? 😉
ngh --no-silent

6 thoughts on “Deploy angular 5 app in Github pages

  1. Just want to say your article is as surprising. The clarity in your post is simply excellent and i could think you are a professional in this subject. Well with your permission let me to grasp your RSS feed to stay up to date with drawing close post. Thanks a million and please keep up the gratifying work.|

  2. Hello I am so glad I found your web site, I really found you by mistake, while I was searching on Yahoo for something else, Regardless I am here now and would just like to say thanks for a tremendous post and a all round enjoyable blog (I also love the theme/design), I don’t have time to go through it all at the minute but I have saved it and also added your RSS feeds, so when I have time I will be back to read more, Please do keep up the great work.|

  3. Hello terrific blog! Does running a blog similar to this require a large amount of work? I have no understanding of coding however I had been hoping to start my own blog soon. Anyways, if you have any ideas or techniques for new blog owners please share. I understand this is off subject but I just wanted to ask. Thank you!|

Leave a Reply

Your email address will not be published. Required fields are marked *