[C4GT Community]: Configure GitHub Actions to run ESLint on changed files and npm audit on package.json changes

[drtechie]

Ticket Contents

Description

The AMRIT UI repos, part of the AMRIT (Accessible Medical Records via Integrated Technologies) initiative by Piramal Swasthya, is built with Angular. To maintain high coding standards and ensure the reliability of the application, we need to configure GitHub Actions to automate quality checks before any code is merged into the main branch. This includes enforcing linting, checking for npm vulnerabilities when package.json is modified, and ensuring that all tests pass.

What You Will Learn:

As a contributor, you will:

• Gain hands-on experience with GitHub Actions and CI/CD pipelines.
• Learn how to automate code quality checks and security scans in Angular projects.
• Develop skills in configuring linting, testing, and dependency vulnerability checks.
• Work closely with experienced developers to maintain high standards in code quality and project reliability.
• Understand best practices in DevOps and continuous integration.

Desired Skills:

• Basic knowledge of Angular and front-end development.
• Familiarity with GitHub, GitHub Actions, and CI/CD concepts.
• Understanding of linting tools (e.g., ESLint) and package managers (e.g., npm).
• Eagerness to learn about DevOps practices and automation tools.

Goals

• Set up GitHub Actions - create a GitHub Actions workflow for the AMRIT UI repository; configure the workflow to run linting checks using ESLint on every pull request.
• Linting Enforcement - ensure that code cannot be merged unless linting passes without errors.
• Vulnerability Scanning - set up npm audit in the GitHub Actions workflow to check for vulnerabilities when package.json or package-lock.json files are changed; ensure that critical vulnerabilities must be resolved before merging.

Expected Outcome

A fully configured GitHub Actions pipeline that enforces coding standards, reliability checks, and security scans for the AMRIT UI repositories. This setup will ensure that only clean, secure, and well-tested code is merged, maintaining the integrity of the application. The workflows must be configured for all the UI repos.
https://github.com/orgs/PSMRI/repositories?q=-UI

Acceptance Criteria

• GitHub Actions workflow is set up and running for every pull request.
• Linting errors are detected and must be resolved before merging.
• npm audit checks for vulnerabilities when dependencies are modified.

Implementation Details

https://github.com/typicode/husky
https://github.com/marketplace/actions/run-eslint
https://github.com/marketplace/actions/npm-audit-action

Mockups/Wireframes

NA

Product Name

AMRIT

Organisation Name

Piramal Swasthya Management Research Institute

Domain

Healthcare

Tech Skills Needed

Angular, ESLint, JavaScript, TypeScript

Mentor(s)

@drtechie

Complexity

Medium

Category

CI/CD, Deployment, Testing

[PayalKumari10]

Hey @drtechie,

I'm eager to contribute to the AMRIT UI repository by setting up GitHub Actions to automate quality checks and ensure the reliability of the application. I plan to configure the CI/CD pipeline to include linting checks using ESLint, vulnerability scanning with npm audit, and ensuring that all tests pass before any code is merged. This will help maintain high coding standards and project integrity. If everything sounds good, please assign this issue to me so I can get started. Thank you!

[drtechie]

@PayalKumari10 go ahead.
Feel free to raise a PR to PSMRI/.github

Add Workflow Files:

• Inside the .github repository, create a directory called workflow-templates.
• Add your workflow YAML files in this directory.

.github/
└── workflow-templates/
    ├── eslint.yml
    └── npm-audit.yml

In other UI repositories within PSMRI, you can reference these workflow templates using a workflow_call event.

name: Check Eslint errors

on:
  push:
    branches:
      - main

jobs:
  call-template:
    uses: ./.github/workflow-templates/eslint.yml

Reference: https://docs.github.com/en/actions/sharing-automations/creating-workflow-templates-for-your-organization

Feel free to message me on Discord (handle: drtechie) if you face any trouble.

[Amrit02102004]

@drtechie Why was this reopened ?
Can I work on it if possible

[drtechie]

@Amrit02102004 please go ahead.

1. Combine both workflow templates into one. You will find an unfinished open PR for reference.
   https://github.com/PSMRI/.github/tree/main/workflow-templates

2. Use these workflow templates in other UI repos. Start with HWC-UI.

Reference: https://docs.github.com/en/actions/sharing-automations/creating-workflow-templates-for-your-organization

Please acknowledge by commenting to assign this ticket.