GitHub Actions support

[EdricChan03]

I've been trying to implement the ability for my application to be deployed for every new commit.

Although the command reports that my application was successfully deployed to the gh-pages branch, I don't see any new changes on the branch apart from the build I manually deployed about 9 days ago.

You can view the project here for your reference: https://github.com/EdricChan03/rss-reader

I'm using the ng deploy command and I've verified that I've updated my Angular app's dependencies to the appropriate versions (e.g. upgrading Angular CLI to v8.3.0 which supports deploy builders). I've also verified that I can deploy my app via the command line locally.

A method that one had suggested before was to append the x-access-token to the GitHub token, but that still didn't work.

Here's my project's dependencies:

  "dependencies": {
    "@angular/animations": "^8.2.3",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "^8.2.3",
    "@angular/compiler": "^8.2.3",
    "@angular/core": "^8.2.3",
    "@angular/fire": "^5.2.1",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/forms": "^8.2.3",
    "@angular/material": "^8.0.1",
    "@angular/platform-browser": "^8.2.3",
    "@angular/platform-browser-dynamic": "^8.2.3",
    "@angular/router": "^8.2.3",
    "@angular/service-worker": "^8.2.3",
    "@types/highlight.js": "^9.12.3",
    "angular-cli-ghpages": "^0.6.0-rc.2",
    "core-js": "^2.6.3",
    "firebase": "^6.2.2",
    "hammerjs": "^2.0.8",
    "highlight.js": "^9.13.1",
    "markdown-to-html": "0.0.13",
    "ngx-markdown": "^8.1.0",
    "rxjs": "^6.5.2",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.2",
    "@angular/cli": "^8.3.0",
    "@angular/compiler-cli": "^8.2.3",
    "@types/gulp": "^4.0.6",
    "@types/gulp-rename": "0.0.33",
    "@types/hammerjs": "^2.0.36",
    "@types/jasmine": "^2.8.16",
    "@types/node": "^10.14.16",
    "codelyzer": "^5.0.1",
    "copy-webpack-plugin": "^4.6.0",
    "gulp": "^4.0.2",
    "gulp-markdown": "^3.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-transform": "^3.0.5",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^1.4.3",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-remap-istanbul": "^0.6.0",
    "node-sass": "^4.12.0",
    "protractor": "^5.4.2",
    "ts-node": "^8.3.0",
    "tsconfig-paths": "^3.8.0",
    "tslint": "~5.10.0",
    "typescript": "^3.5.3"
  }

And the relevant GitHub Action workflow (available at .github/workflows/main.yml in my project):

name: Site workflow


on:
  push:
    branches:
    # Only accept deploying from the master branch
    - master


jobs:
  deploy:
    name: Deploy to GitHub Pages
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v1
    - name: Setup NodeJS LTS
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'
    - name: Install dependencies
      run: npm ci
    - name: Generate documentation
      run: npm run genDocs
    - name: Deploy site
      run: npm run action:deploy
      env:
        GH_TOKEN: ${{ secrets.DEPLOY_GH_PAGES_TOKEN }}

Note: I've also ensured that the DEPLOY_GH_PAGES_TOKEN I have specified in the Secrets tab of a repository has the repo permission group ticked.

EDIT: Here's the output of ng version attached below:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.0
Node: 10.15.3
OS: darwin x64
Angular: 8.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.2
@angular-devkit/build-angular     0.802.2
@angular-devkit/build-optimizer   0.802.2
@angular-devkit/build-webpack     0.802.2
@angular-devkit/core              8.2.2
@angular-devkit/schematics        8.3.0
@angular/cdk                      8.0.1
@angular/cli                      8.3.0
@angular/fire                     5.2.1
@angular/flex-layout              8.0.0-beta.26
@angular/material                 8.0.1
@ngtools/webpack                  8.2.2
@schematics/angular               8.3.0
@schematics/update                0.803.0
rxjs                              6.5.2
typescript                        3.5.3
webpack                           4.38.0

EDIT 2: Here's the scripts defined in my package.json:

  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "githubPages": "npm run genDocs && ng deploy --base-href=/rss-reader/ && rm -rf dist/",
    "githubPages2": "npm run build && ngh && rm -rf dist/",
    "genDocs": "gulp docs",
    "build": "ng build --prod --base-href /rss-reader/ --deploy-url /rss-reader/",
    "build-prod-local": "ng build -c=httpserver --prod && cd dist && http-server",
    "deploy": "ng deploy",
    "action:deploy": "ng deploy --repo https://x-access-token:GH_TOKEN@github.com/EdricChan03/rss-reader.git"
  },

EDIT 3: Here's the default configuration I have supplied for the deploy builder (extracted):

{
  "projects": {
    "rss-reader": {
      "architect": {
        ...
        "deploy": {
          "builder": "angular-cli-ghpages:deploy",
          "options": {
            "baseHref": "/rss-reader/",
            "repo": "https://github.com/EdricChan03/rss-reader"
          }
        }
      }
    }
  }
}

---

P.S. If you haven't heard of GitHub Actions yet, you can learn more about it here. I'm also in the beta which allows me to participate in such a beta feature.

[JohannesHoppe]

Hi,

let's try to figure this out together. I wanted to make a how-to-guide for all the CI/CD platforms. We should start with GitHub Actions! 😉

I applied the org for the beta and now I'm waiting for that mail. I can't do anything more at the moment. Meanwhile you could:

• use the --no-silent switch and investigate on the shown output
• add remote via git remote add origin https://github.com/<username>/<repositoryname>.git
• OR use the --repo option

... I'm just guessing, but I bet there is no remote configured.

Cheers, Johannes

(typed on my mobile phone)

[EdricChan03]

Thanks for responding quickly to my issue!

Anyways, here are my responses to the individual questions:

• I've tried adding the --no-silent switch but it seems to have no effect to the deployment
• I'll see if I can do that.
• I did try specifying the --repo flag in a recent commit but nothing happened: EdricChan03/rss-reader-angular@8e7fce5 (You can view the log here: https://github.com/EdricChan03/rss-reader/runs/209940669)

P.S. Could this be due to the gh-pages package?

EDIT: The problem could've been caused by the default options I have passed to the deploy builder. I've just pushed a commit that removes the default repo option: EdricChan03/rss-reader-angular@fb1d8a8

EDIT 2: The commit I've pushed did not help at all. I'll try to add the --no-silent flag.

EDIT 3: Adding the --no-silent flag has not modified any of the output produced. https://github.com/EdricChan03/rss-reader/runs/210479109

[EdricChan03]

I'm currently attempting to use the GITHUB_TOKEN that GitHub automatically generates for you in Actions instead of a personal access token.

[EdricChan03]

Specifying the username and email has fixed the pushing to the gh-pages branch problem, but now I've got a new problem where the commit isn't actually deployed to GitHub Pages.

[EdricChan03]

Looks like it's caused by the issue of using the default GitHub token instead of a personal access token (P.S. I contacted the GitHub staff a while back regarding this same issue when deploying to my personal website and the email reply can be seen below:)

Text version

Hi Edric,

Thanks for getting in touch! I checked on our end and can explain what's happening here. I see that you're using the GITHUB_TOKEN environment variable to authenticate. That variable is a GitHub App installation token (also known as a server-to-server installation token).

After speaking with the team about this, they let me know that server-to-server requests won't kick off a page build, whether it's creating a commit or explicitly requesting a page build:

https://developer.github.com/v3/repos/pages/#request-a-page-build
I see how it would be useful to open this functionality to GitHub Actions, so I've let the team know about this internally.

However, I'd like to mention that the requesting a page build endpoint is enabled for integrations via a user access token. In other words, you can make a user-to-server request to request a page build:

https://developer.github.com/apps/building-github-apps/identifying-and-authorizing-users-for-github-apps/#user-to-server-requests
There isn't a way to get a user installation token for GitHub Actions, so we recommend creating a personal access token and using that instead of the GITHUB_TOKEN provided by Actions to request a page build:

https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line

We hope this helps explain things. Please let us know how else we can be of help to you!

All the best,
Francis

[EdricChan03]

Using a personal access token with the repo scope works! I can now close this issue.

If you want my process to be documented, feel free to reply to my comment.

[JohannesHoppe]

Wow, thanks for figuring this out! ☺️👍

Could you do the community a big favour by writing everything down on in a new README.md and send a PR? It would be super helpful for everybody else if this environment is well-documented. The folders /docs is a perfect place for that.

[EdricChan03]

I'm more than welcome to document this down if I have sufficient time to do so, which I don't have right now.

Anyways, what should I name this README file that I would create?

And here's a possible draft for the README (based on the other docs already available):

---

angular-cli-ghpages: README for setting up deployment with GitHub Actions

First para goes here

Prerequisites

• You've signed up for the GitHub Actions beta and taken a look at the documentation for the new GitHub Actions format _(TODO: Insert link to GitHub blogpost) and/or understand the purpose of GitHub Actions
• You've written some form of YML code before and/or have minimal knowledge of the syntax
• You already have a working Angular app that can be deployed to GitHub Pages

Getting started

Please ensure that you've read the prerequisites section before continuing with this section.

(Steps with individual headers go here)

Notes

• Please note that GitHub Actions is currently in beta and is not currently suited/intended to be for use in production.
• Please note that the steps above may be modified at any time for reasons including the discovering of new ways to simplify the steps/process of deployment or for other reasons not explicitly mentioned.
• (Other notes go here)

[JohannesHoppe]

This template looks pretty fine. Please don't stop now! 😃

We could name this file: /docs/README_environment_github_actions.md

[shhdharmen]

Hey @JohannesHoppe,

I've generated a PR #77 for it. I hope that's useful.

Thanks.

[JohannesHoppe]

Hello friends. I realized that we have now a Checkout v2 action (https://github.com/actions/checkout/) and it looks like we might be able to ommit GH_TOKEN (personal access token) and use the GITHUB_TOKEN.

see
actions/checkout#75

Has anybody already used v2?

@shhdharmen @EdricChan03 @fmalcher

[EdricChan03]

@JohannesHoppe Looks like migrating to v2 of the actions/checkout action hasn't really changed much.

I've successfully made the build process work, but it still seems that it's not possible to trigger a build. I'll try to see what I can do about this.

[JohannesHoppe]

FYI actions/checkout#75 (comment)

[JohannesHoppe]

fixed in v0.6.2

see https://github.com/angular-schule/angular-cli-ghpages/releases/tag/v0.6.2

[EdricChan03]

@JohannesHoppe Looks like the GITHUB_TOKEN secret now works? https://github.community/t5/GitHub-Actions/Github-action-not-triggering-gh-pages-upon-push/m-p/46519/highlight/true#M6551

And this run: https://github.com/EdricChan03/rss-reader/runs/447475521

EDIT: See EdricChan03/rss-reader-angular@25a570d for more info

[JohannesHoppe]

@EdricChan03 I should try this out!

[EdricChan03]

I suppose this issue can be closed?