GitHub Action to ease debugging of Angular & React projects

Devesh Chatuphale — Mon, 14 Sep 2020 14:37:53 +0000

While working on an angular application that uses multiple packages & contains handful of modules, each time a new package is added or a particular module is changed significantly, everyone in the team used to generate source map individually & manually for debugging code for redundant use of libraries, module with heavy sizes etc.

My Workflow

Hence to address these issues, my workflow generates source map of Angular application on every push to analyze & debug sources as well as origins of all of the code inside modules & components.It also generates a status file which contains an output of build instruction like files generated along with their size & time taken to generate build.

Once source map files are generated, it then emails the generated files to the email addresses of respective recipients.

Submission Category:

My submission falls under,

Maintainer Must-Haves
Wacky Wildcards

Yaml File

name: Generate & email source maps for Angular app        
on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - uses: actions/checkout@v1
      - name: Cache node modules       # Caching node modules to speedup workflows
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Node ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: npm ci # Clean install of dependencies from package.json & generating build of angular app, storing output in text file
        run: |
          npm ci
          npm run build > "${GITHUB_SHA}-status.txt"
      - name: install source map & generate source maps output  # Installing source-map-explorer & generating output of source map in html,json & tsv with commit SHA as filename
        run: |
          npm i -g source-map-explorer
          source-map-explorer dist/*.js --html "${GITHUB_SHA}.html"   
          source-map-explorer dist/*.js --json "${GITHUB_SHA}.json"
          source-map-explorer dist/*.js --tsv "${GITHUB_SHA}.tsv"
      - name: Send report email # Using action to send email of Build result & source map files to team members, collaborators & contributors
        uses: dawidd6/action-send-mail@v2
        with:
          server_address: smtp.gmail.com
          server_port: 465
          username: ${{secrets.EMAIL}}
          password: ${{secrets.PWD}}
          subject: Source map & build report
          body: <h1> Build results & source map of <b>${{github.repository}}</b> for commit id <b>${{github.sha}}</b></h1>
          to: ${{secrets.RECIPIENTS}}
          from: ${{secrets.EMAIL}}
          content_type: text/html
          attachments: ${{github.sha}}.html,${{github.sha}}.json,${{github.sha}}.tsv,${{github.sha}}-status.txt

Workflow mainly contains following steps

Initially, workflow sets up node environment using cache & node setup actions, installs dependencies for application followed by running build command & storing execution results of commands in a text file.
It then runs command to generate source map using source-map-explorer & stores the result in json, html & tsv files with commit id SHA as a file name.
Finally, send email action sends an email containing the build status file along with source map files to the configured recipients

Github repository with example code

deveshchatuphale7 / sourcemap-action

Actionstest

This repository contians sample Angular 10 application with a source map generation actions workflow file actions.yml

On each commit on the branch master, the workflow generates build for the angular application, on successful generation of build files, workflow creates build status file containing name & size details of each file generated along with time taken to generate build. Along with that, it creates source map of the build files in the format of json, html & tsv with commit SHA as a name of the files.

At last, workflow sends an email of the generated source map files to the configured email addresses of developers, collaborators etc.

View on GitHub

Thank You!