GitHub Action
Angular Deploy gh-pages Actions
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@v2
- name: All things angular
uses: AhsanAyaz/angular-deploy-gh-pages-actions
with:
github_access_token: ${{ secrets.ACCESS_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.
build_folder: dist/my-project # The folder where your project is supposed to be after running ng build by the action.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. . |
with |
No | "/" |
deploy_branch |
The branch to which we'll deploy the build folder. . | with |
No | "gh-pages" |
build_folder |
The folder in which ng build provides its output. 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 installBuild the typescript and package it for distribution
$ npm run build && npm run packRun 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