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

drtechie commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

@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 commented 1 month ago

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

drtechie commented 1 month ago

@Amrit02102004 please go ahead.

Combine both workflow templates into one. You will find an unfinished open PR for reference. https://github.com/PSMRI/.github/tree/main/workflow-templates
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.

gupta-soham commented 1 month ago

Wip: use workflow templates in other UI repos

PSMRI / AMRIT