Setting up Static Analysis in GitHub Actions for a React App

Here’s a guide to setting up static analysis actions in your React app’s GitHub Actions workflow:

1. Define Your Workflow:

name: Static Analysis

on: push: branches:

  • main pull_request: branches:
  • main

jobs: static-analysis: runs-on: ubuntu-latest

steps:

  • name: Checkout code uses: actions/checkout@v3

  • name: Setup Node.js uses: actions/setup-node@v3 with: node-version: "18" # Use your desired Node version

  • name: Install dependencies run: |

 npm install

Static analysis steps below

2. Choose Your Tools:

ESLint (Catches code style and potential errors):

  • name: Run ESLint uses: actions/eslint-action@v3 with: files: "src/**/*.js" eslint-path: "./node_modules/eslint" # Adapt if ESLint is installed globally

Prettier (Enforces consistent code formatting):

  • name: Run Prettier uses: actions/prettier@v3 with: files: "src/**/*.js"

Stylelint (Analyzes CSS and SCSS for style errors and inconsistencies):

  • name: Run Stylelint uses: stylelint/actions/lint@v2 with: configFile: ".stylelintrc.json" # Adjust config file path if necessary files: "src/**/*.{css,scss}"

SonarQube (Detects bugs, code smells, and security vulnerabilities):

  • name: SonarQube Scan uses: sonarsource/sonarqube-scan-action@master env: SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} # Store your SonarQube token securely with: projectBaseDir: "."

Configure SonarQube project settings as needed

3. Customize Configuration:

  • Create configuration files (e.g., .eslintrc.json, .prettierrc.json, .stylelintrc.json, sonar-project.properties) for each tool in your project root.
  • Use eslint-config-react-app for a good starting point for React-specific ESLint rules.

4. Fail on Errors (Optional):

Configure actions to fail the workflow if issues are found. This enforces code quality. For example:

  • name: Run ESLint uses: actions/eslint-action@v3 with: files: "src/**/*.js" eslint-path: "./node_modules/eslint" failOnError: true