Introduction
This article demonstrates how to use GitHub Pages to launch an Angular application. An Angular application can be released from a remote server like GitHub Pages, Azure, AWS, Firebase, etc. HTML, CSS, and JavaScript files from a GitHub repository are accepted by GitHub Pages, a free website hosting service. You must first build a GitHub Pages site repository in order to publish an Angular application to GitHub Pages. Your GitHub Pages webpage will be hosted by this repository. For the application to be published via GitHub Pages, the Angular application folder must be established inside the site repository.
Table of Contents
- Tools
- Generic guide
- Specific example
- Conclusion
Tools
- Visual Studio Code
Generic guide
You can use the following commands on the Angular-CLI once you have created a GitHub Pages site repository and pushed your Angular application files inside the Angular application folder (command-line interface).
You can install angular-CLI-ghpages on your computer globally by using the command below. One time only is this done.
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/"
Be aware that the GitHub Pages site repository is “GitHubUserName.github.io” and the Angular application folder is “GitHubfolderName.” The application is deployed with the next command.
npx angular-cli-ghpages --dir=dist/Project-name
There will be a dist/Project-name directory generated in your Angular application. Enter the Project-name folder and copy every file and folder there before pasting them into a different folder that we’ll call the temp folder. Paste the material you saved within the temporary folder after removing all the files and folders from the Angular application folder. As a result, the only files and directories in your Angular application folder are those that were created inside dist/Project-name. Visit your GitHub Pages website to view your Angular application live online after you commit and send the modifications to GitHub.
Specific example
Use the first command from the aforementioned list to install Angular-CLI-ghpages on your computer globally. The Angular application can then be built using the command below.
ng build --prod --base-href "https://Sakhile-Msibi.github.io/ngVideoGameDB/"
Please take note that “ngVideoGameDB” is my Angular application folder and “Sakhile-Msibi.github.io” is my GitHub Pages site repository. Afterward, launch the application.
npx angular-cli-ghpages --dir=dist/ngVideoGameDB
Conclusion
Using a specific example and basic instructions, I demonstrated how to publish an Angular application using GitHub Pages in this blog post.
