This article guides you through few simple steps to deploy Angular app to Github pages.
Github allows you to deploy a static website or web app using Github pages feature.
It’s simple and easy peasy to use Angular CLI along with a node package named angular-cli-ghpages to achieve the deployment.
1. Install Angular CLI Ghpages
By using NPM, you can install angular-cli-ghpages globally.
npm install -g angular-cli-ghpages
2. Angular App Build Production
As the name suggests, we need to use Angular CLI to create a build of our app. Let’s go the project directory and run the needed command.
This will take around 10-20 seconds depends on the size of the project. And then it will generate a new folder called /dist at the root folder.
Hold on! If you’ve noticed it’s having the large size of the app, maybe in MBs. And it’s quite heavy to deploy the app with this size.
To overcome this issue, Angular provides an option prod to generate a production build.
ng build --prod
Now, if you again notice the size, it will be drastically reduced the complete folder size. It’s amazing, right!
3. Specify the base href location
Before we push our Angular app to Github pages, we nee to rebuild it with the base-href flag.
ng build --prod --base-href "https://<user-name>.github.io/<repo>/"
Now, it’s ready just running angular-cli-pages will do the job.
Done! Your app will be hosted on https://username.github.io/app-name/.
Additional Github pages options
You can add a message to the commit version while deploying your app.
ngh --message="First Version - Hello World"
Also, you can specify the branch name while deploying.
Finally, you can perform a dry run before deploying to see the output.
That’s it. It’s one of the easiest ways to deploy angular app to Github pages.
Moreover, If you’re having any issues, you can take help from Angular app to Github page document.
Don’t forget to share this article!