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
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.
Thank You!
Top comments (0)