Setup Github Actions Angular project

Hi! I discover this great ci tool for your Github projects, this is easy way to add ci in your projects, and for example validate your pull request before merge.

Here, I am going to put my scripts of my package.json for ci, this is only an example you need to put your own scripts:

    "test:ci": "ng test --browsers ChromeHeadless --code-coverage --watch=false",
    "sass-lint": "sass-lint -v -c ./sass-lint.yml",
    "format:fix": "pretty-quick --staged",
    "lint": "eslint \"**/*.{ts,tsx}\" --quiet --fix",
    "all-lints": "npm run format:fix && npm run lint && npm run sass-lint"

And now we need to create our "actions" for Github actions this example it's for validate our Pull Request:

First, in your root folder, create a new folder with this name:

• .github

Inside the .github folder create new one with the name:

• workflows

Finally we create new action-file:

• This file have to be .yml, in my case the name of the is "pull-request" but you can whatever you want, the result is this:

This is the content of my flow (pull-request.yml):

name: Pull Request Validations

on: [push, pull_request]

jobs:  
  test:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v1
    - name: Install node
      uses: actions/setup-node@v1 #this will install Node and npm on Ubuntu
      with:
        node-version: '12.x'
    - name: Install dependencies
      run: npm install
    - name: Install Angular CLI
      run: npm install -g @angular/cli > /dev/null    
    - name: Run linters and prettier fix
      run: npm run all-lints
    - name: Run Test
      run: npm run test:ci  

Finally, we push our changes and create a Pull Request to join to our master(or main) branch, and automatically our validations will run if this finish with success you will able to merge, if not you need to review the logs, in this screen: