GitHub Action to ease debugging of Angular & React projects
Tags: actionshackathon
Published: 2020-09-14 14:37:53

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)

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

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)


### Yaml File
```yaml
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

1. Initially, workflow sets up node environment using [cache](https://github.com/marketplace/actions/cache) & [node setup](https://github.com/marketplace/actions/setup-node-js-environment) actions, installs dependencies for application followed by running build command & storing execution results of commands in a text file.

2. It then runs command to generate source map using [source-map-explorer](https://www.npmjs.com/package/source-map-explorer) & stores the result in json, html & tsv files with commit id SHA as a file name.

3. Finally, [send email](https://github.com/marketplace/actions/send-email) action sends an email containing the build status file along with source map files to the configured recipients 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z6uuu4uo01kdf1ew1o4d.PNG)

### Github repository with example code


{% github https://github.com/deveshchatuphale7/sourcemap-action %}

Thank You!