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

Comments

Popular posts from this blog

Deploy Spring Boot app in digitalocean cloud (or any cloud as long asyou have ssh access)

Upload large files : Spring Boot

User activity logging: Spring