Use Github Action to deploy Angular app to github page

  • Generate a personal access token and create ACCESS_TOKEN variable in Settings -> Secrets.
  • Keep the personal access token in a safe place and do not lose it
  • Go to Actions tab of the github repo
  • Create main.yml under .github/workflow
name: CI
      - master
    runs-on: ubuntu-latest
      - name: Checkout
        uses: actions/checkout@v2
          persist-credentials: false

      - name: Install
        run: |
          npm install
          npm run github-page-deploy
      - name: Build and Deploy Repo
        uses: JamesIves/github-pages-deploy-action@releases/v3
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages
          CLEAN: true
          GIT_CONFIG_NAME: <author name>
          GIT_CONFIG_EMAIL: <email address>
          FOLDER: dist/<repo name>


Deploy angular app to Github Page by Travis CI

1) Install npm dependencies

angular-cli-ghpages is a plugin that pushes angular application to gh-pages branch.

npm install angular-cli-ghpages --save-dev 

Add prettier schematic to Angular project

npm install -g @schuchard/prettier
ng g @schuchard/prettier:add

2) Create a .travis.yml file that details the deployment steps

3) Specify language is node_js and node version is 8

language: node_js
    - '8'

4) Cache npm dependencies and production build directory, dist.

    npm: true
        - node_modules
        - dist/

5) Create environment variables to store github organization, repo name, github username and github email respectively. GH_TOKEN is your secret github token that is saved under Settings of your repository. You can find the link to generate github token here

        - GITHUB_ORG=""
        - REPO_NAME="<repository name>"
        - GITHUB_NAME="<username>"
        - GITHUB_EMAIL="<email address>"

6) Add “before_script” to install npm dependencies without modifying package-lock.json file

    - npm install --no-save

7) Add “script” to run different tasks before the final deployment

    - npm audit
    - npm run prettier
    - npm run lint
    - npm run test-headless
    - npm run build-ngh

        - master

8) The above tasks are created in scripts of package.json:

  • npm audit audits npm dependencies to ensure vulnerabilities do not exist
  • npm run prettier formats files with Prettier code formatter
  • npm run lint performs linting on source files to identify any lint problem and aborts the process prematurely
  • npm run test-headless executes test cases in headless Chrome browser and terminates if any test case fails
  • npm run build-ngh compiles the source codes on master branch to production build and places the artifacts to dist/<project> directory
"scripts": {
    "prettier": "prettier --write \"**/*.{js,json,scss,ts}\"",
    "lint": "ng lint",
    "build-ngh": "ng build --prod --base-href \"<repository name>/\"",
    "test-headless": "ng test --watch=false --browsers=ChromeHeadless"

9) If all script tasks finishes successfully, the task in “after_success” is executed to push the static pages to gh_pages branch

    - ngh --repo="$GITHUB_ORG/$GITHUB_NAME/$REPO_NAME.git" --name="$GITHUB_NAME" --email="$GITHUB_EMAIL" --dir=dist/ng-rxjs-state-management-demo --no-silent

10) Add notifications configuration to receive notification email when travis build fails

- somebody@example.come
on_success: never # default: change
on_failure: always # default: always

11) Navigate to https://<username><repo name>/ to view the static pages

Projects built in July, 2018


Vanilla JS, SCSS, HTML

Import bootstrap, ng-bootstrap and font-awesome in angular app

1) yarn add bootstrap @ng-bootstrap/ng-bootstrap font-awesome

yarn add bootstrap @ng-bootstrap/ng-bootstrap font-awesome

2) In style.scss, import bootstrap and font-awesome

  1. @import "~bootstrap/scss/bootstrap";
  2. $fa-font-path : '../node_modules/font-awesome/fonts';
  3. @import "~font-awesome/scss/font-awesome";

4) type ng serve to launch application in development mode. Index page should open at url http://localhost:4200.

ng serve