This GitHub action will handle the deploy process of your angular application to GitHub Pages. You can configure what folder will be deployed once the build is created. Also, you can specify which branch to deploy to.
You can include the action in your workflow to trigger on any event that GitHub actions supports. If the remote branch that you wish to deploy to doesn't already exist the action will create it for you. Your workflow will also need to include the actions/checkout
step before this workflow runs in order for the deployment to work.
You can view an example of this below.
name: Build and Deploy
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: All things angular
uses: AhsanAyaz/angular-deploy-gh-pages-actions@[version] ## replace by latest version without it you will see Expected format {org}/{repo}[/path]@ref. Actual 'AhsanAyaz/angular-deploy-gh-pages-actions',Input string was not in a correct format.
with:
github_access_token: ${{ secrets.GITHUB_TOKEN }} # see the Configuration section for how you can create secrets
build_configuration: staging # The build environment for the app. please look configurations in your angular.json
base_href: /my-project/ # make sure this corresponds to https://<your_username>.github.io/<base_href>/
deploy_branch: gh-pages # The branch the action should deploy to.
angular_dist_build_folder: dist/my-project # The folder where your project is supposed to be after running ng build by the action.
permissions:
contents: write # Allow write permission to GITHUB_TOKEN to commit to deploy branch.
If you'd like to make it so the workflow only triggers on push events to specific branches then you can modify the on
section.
You have to configure the with
portion of your workflow file so that the action works fine. See the usage of with
in the example above. Fir the Github secret (ACCESS_TOKEN) or anything added later, secrets
must be referenced using the bracket syntax and stored in the GitHub repositories Settings/Secrets
menu. You can learn more about setting environment variables with GitHub actions here.
Key | Value Information | Type | Required | Default |
---|---|---|---|---|
angular_project_dir |
The directory of the angular project, in which all the commands will run. This is super handy when you have several projects within a workspace. Or have a demo angular project within a library. Defaults to current workspace directory | with |
Yes | "./" |
build_configuration |
You can provide the configuration using which the action should create the build. If nothing is provided, it will run ng build --prod by default. See your angular.json file for configurations. |
with |
Yes | "production" |
base_href |
Since gh-pages will deploy the app for https://yourgithubusername.github.io/repositoryname/, you need to provide this base-href in order to have your project working correctly, since the base-href won't be '/' in this case. Note to use with @angular/cli@^10.0.0 (Angular version 10), you need the specify the base-href in the angular.json file and then use an empty string as parameter base_href: '' # empty string to support optional base-href to make the parameter optional. |
with |
No | "/" |
deploy_branch |
The branch to which we'll deploy the build folder. | with |
No | "gh-pages" |
angular_dist_build_folder |
The folder in which ng build provides its output for your project. The folder where your index.html resides in. Also, this is the folder which will be deployed to the deploy_branch . |
with |
No | "dist" |
run_lint |
Runs the ng lint command behind the scenes to make sure the files are linted properly. |
with |
No | "false" |
github_access_token |
Depending on the repository permissions you may need to provide the action with a GitHub personal access token instead of the provided GitHub token in order to deploy. You can learn more about how to generate one here. This should be stored as a secret. | secrets / with |
Yes |
Install the dependencies
$ npm install
Build the typescript and package it for distribution
$ npm run build && npm run pack
Run the tests ✔️
$ npm test
PASS __tests__/main.test.ts
✓ test does not run lint if run_lint is falsy (3ms)
✓ test runs lint if run_lint is not falsy (1ms)
✓ test throws error for deployment if accessToken is not provided (17ms)
✓ test runs fine for deployment if all inputs are correct (1ms)
✓ test runs createBuild with provided values (1ms)
✓ test runs createBuild with default values if they are not explicitly provided
...
See the versioning documentation