How to host Angular application in GitHub with Actions?

In this article, the below steps are followed to deploy Angular application with Github page.

Before we proceed with steps, let us all know that — the GitHub has Actions tab in which one can create/set workflow for code deployment anywhere as required.

First Things First: Create token in GitHub

The prerequisite for this deployment would be creating a token for the build process to automate the authentication and authorization process.

• Go to your Profile menu and click on Settings.
• In the sidebar choose Developer settings
• In the sidebar choose Personal access tokens
• Click on Generate new token

You can define your Note. For eg:- GITHUB_ACCESS_TOKEN. 
Choose the scope for this token.
 
- Select repo checkbox for allowing the token to access your repository

GitHub — Personal Access Token

• Click on Generate Token at the bottom of the page.

Make sure to copy your new personal access token now. You won’t be able to see it again!

Enable GitHub page in your repository

• Go to the YOUR_REPOSITORY Settings tab
• Click on Options from the sidebar
• Scroll down to GitHub Pages
• Select branch as gh-pages and select /root and Save

GitHub Pages Setting

Angular Repository settings

• Go to your repository Settings tab
• In sidebar click on Secrets
• Click on New repository secret

Set Name as ACCESS_TOKEN
Set Value as <COPIED-PERSONAL-TOKEN>(paste)
Click on Add secret

Last But Not The Least: Setting Workflow for the repository

There are actions available in GitHub / Marketplace / Actions, you can select your preferred one. This Article uses Angular Deploy gh-pages Actions.

• Create a folder structure and a file in your repository like below,

.github/workflows/main.yml

• Paste the below code and modify the with parameters according to your repository like below

Action will be triggered based-on on key in YAML file. More details

on:
 push: # during push
  branches: 
   - master # branch

• Finally commit and push the code to the main branch
• You can see the Workflow action under Repository -> Actions tab

GitHub Actions with Workflow

Once after a successful build, the application can be checked in the browser,

Sample: https://shangan23.github.io/shopping-cart/home