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