Automated Release Setup

Complete guide to setting up automated npm publishing with semantic release, changelog generation, and GitHub releases for React Kickstart.

🎯 Overview

The automated release system uses semantic-release to handle the entire release process:

🛠️ Prerequisites Setup

# Login to npm
npm login
 
# Create automation token
npm token create --type=automation

{
  "release": {
    "branches": ["main"],
    "plugins": [
      "@semantic-release/commit-analyzer",
      "@semantic-release/release-notes-generator",
      [
        "@semantic-release/changelog",
        {
          "changelogFile": "CHANGELOG.md"
        }
      ],
      [
        "@semantic-release/npm",
        {
          "npmPublish": true,
          "access": "public"
        }
      ],
      "@semantic-release/github",
      [
        "@semantic-release/git",
        {
          "assets": ["CHANGELOG.md", "package.json", "package-lock.json"],
          "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
        }
      ]
    ]
  }
}

📝 Conventional Commits

The release system uses Conventional Commits (opens in a new tab) to determine version bumps:

# Bug fixes
fix: resolve issue with package installation
fix(cli): handle empty project names correctly
fix(generator): fix TypeScript config generation

🔄 Release Workflow

Automated Steps

🚀 GitHub Actions Workflow

Here's the complete GitHub Actions workflow for automated releases:

name: Release
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run tests
        run: npm test
      
      - name: Run QA automation
        run: |
          node qa-automation/test-matrix-generator.js
          node qa-automation/test-runner.js critical --full
 
  release:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
          token: ${{ secrets.GITHUB_TOKEN }}
      
      - uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release

📊 Release Configuration

Semantic Release Plugins

{
  "preset": "conventionalcommits",
  "releaseRules": [
    {"type": "docs", "scope": "README", "release": "patch"},
    {"type": "refactor", "release": "patch"},
    {"type": "style", "release": false}
  ]
}

🔍 Monitoring & Troubleshooting

Common Issues

Authentication Failures:

# Check NPM token
npm whoami
 
# Verify GitHub token permissions
curl -H "Authorization: token $GITHUB_TOKEN" https://api.github.com/user

Release Not Triggered:

• Check commit message format
• Ensure commits contain releasable changes
• Verify branch protection rules

Build Failures:

• Check test suite passes
• Verify QA automation succeeds
• Review GitHub Actions logs

Manual Release

If automated release fails, you can trigger manually:

# Install semantic-release globally
npm install -g semantic-release
 
# Set environment variables
export GITHUB_TOKEN=your_github_token
export NPM_TOKEN=your_npm_token
 
# Run semantic release
semantic-release

📈 Release Analytics

Tracking Metrics

Monitor release health with these metrics:

• Release Frequency - How often releases are published
• Time to Release - Time from commit to published release
• Success Rate - Percentage of successful releases
• Version Distribution - Breakdown of patch/minor/major releases

GitHub Insights

Use GitHub's built-in analytics:

• Releases page - View all releases and download statistics
• Actions tab - Monitor workflow success rates
• Insights → Traffic - Track npm package downloads
• Insights → Community - Monitor community engagement

🛡️ Security Considerations

Token Security

• NPM Token: Use automation tokens with minimal required permissions
• GitHub Token: Leverage the built-in GITHUB_TOKEN when possible
• Token Rotation: Regularly rotate tokens and update secrets
• Audit Logs: Monitor npm and GitHub audit logs for suspicious activity

Release Verification

Verify releases are legitimate:

# Check npm package integrity
npm audit
 
# Verify package contents
npm pack --dry-run
 
# Check GitHub release signatures
git verify-tag v1.0.0

📚 Next Steps

Explore Deployment:

• CI/CD Setup → - Comprehensive CI/CD pipeline configuration
• Nightly Operations → - Automated maintenance and monitoring

Related Topics:

• QA Automation → - Quality assurance and testing
• Contributing → - How to contribute to React Kickstart