Introduction
This blog shows how to deploy an Angular application using GitHub Pages. You can deploy an Angular application from a remote server such as GitHub Pages, Azure, AWS, Firebase, etc. GitHub Pages is a free website hosting service that takes HTML, CSS, and JavaScript files from a GitHub repository. To deploy an Angular application to GitHub Pages you have to first create a GitHub Pages site repository on GitHub. This repository will host your GitHub Pages site. The Angular application folder must be created inside the GitHub Pages site repository for the application to be deployed using GitHub Pages.
Table of Contents
- Tools
- Generic guide
- Specific example
- Conclusion
Tools
Generic guide
Once you have created a GitHub Pages site repository and pushed your Angular application files inside the Angular application folder you can use the following commands on the Angular-CLI (command-line interface).
The following command will install angular-CLI-ghpages globally in your machine. This is only done once.
npm i angular-cli-ghpages --save-dev
The next command is used to build the Angular application for use in production.
ng build --prod --base-href "https://GitHubUserName.github.io/GitHubfolderName/"
Note that "GitHubUserName.github.io" is the GitHub Pages site repository and "GitHubfolderName" is the Angular application folder. The following command deploys the application.
npx angular-cli-ghpages --dir=dist/Project-name
In your Angular application, a dist/Project-name directory will be created. Go inside the Project-name folder and copy all the files and folders inside and paste them into a separate folder, let call it temp folder. Delete all the files and folders inside the Angular application folder and paste the content you saved inside the temp folder. This means your Angular application folder will now only have the files and folders that were created inside dist/Project-name. Commit and push the changes to GitHub and visit your GitHub Pages site to see your Angular application live on the internet.
Specific example
Install the Angular-CLI-ghpages globally in your machine using the first command shown above. Then use the following command to build the Angular application
ng build --prod --base-href "https://Sakhile-Msibi.github.io/ngVideoGameDB/"
Note that "Sakhile-Msibi.github.io" is my GitHub Pages site repository and "ngVideoGameDB" is my Angular application folder. Then deploy the application.
npx angular-cli-ghpages --dir=dist/ngVideoGameDB
The original Angular application files and folders can be found here. After deleting everything inside the Angular application folder and replacing it with the content inside the dist/ngVideoGameDB, the Angular application folder content can be found here. The application can be viewed here. A video showing how to deploy this Angular application to GitHub Pages can be found here.
Conclusion
In this blog, I showed how to deploy an Angular application using GitHub Pages in general terms and using a specific example.