EdgarsGarsneks / angular-deploy-gh-pages-actions

Github actions to automagically deploy your angular app to GitHub pages.

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

Getting Started 💪

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.

Configuration ⚙️

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

Contributing :person:

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

LICENSE 📋

Licensed under the MIT License (the "License");