A guide on how to deploy Angular applications to GitHub Pages

You can deploy an Angular application to a remote server such as GitHub Pages, Azure, Aws, Firebase, ect. This article shows how to deploy an Angular application to GitHub Pages. GitHub Pages is a free website hosting service that takes HTML, CSS and JavaScript files from a GitHub repository. Angular is frontend TypeScript framework. Angular allows you to create the frontend of applications such as websites using HTML, CSS and JavaScript.

In order to deploy your 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. My GitHub Pages site is https://sakhile-msibi.github.io./ and my GitHub Pages site repository is sakhile-msibi.github.io. The Angular application folder must be created inside the GitHub Pages site repository in order for the application to be deployed using GitHub Pages.

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).

(1) npm i angular-cli-ghpages --save-dev
This command will install angular-cli-ghpages globally in your machine. This is only done once.

(2) 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. This command is used to build the Angular application for use in production.

(3) npx angular-cli-ghpages --dir=dist/Project-name
This command deploys the application.

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 in 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 at dist/Project-name. Commit and push the changes to GitHub and visit your GitHub Pages site to see your Angular application live 😎.

I have deployed an Angular application to GitHub Pages and I will show you how I used the above instructions to deploy the application. I did not use the first command because I had already installed angular-cli-ghpages in my laptop.

(2) ng build --prod --base-href "https://Sakhile-Msibi.github.io/ngVideoGameDB/"
(3) 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 replcing it with the content inside the dist/ngVideoGameDB, the Angular application folder content can be found here. You will notes that the files and folders inside the Angular application folder after it was deployed are very few compared to before it was deployed. The reason for that is that when you deploy an application to a remote server it is compressed to it smallest size possible. The application can be viewed here. A video showing how to deploy a Angular application to GitHub Pages can be found here.

The application uses a public API to create a video game database. The API key token will expire in about a month from today (09/07/2021), however I can always create a new token. The code of the application can be found here. ✌ 🦁