Deploy React on Netlify with GitHub Actions

⚛️ React 🌐 Netlify Platform ⚙️ GitHub Actions

Configuration Files

Production-ready configuration files with detailed comments and best practices. Each file works together as a complete deployment solution.
name: Deploy to Netlify

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2
        with:
          publish-dir: './dist'
          production-branch: main
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: true
          enable-commit-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[build.environment]
  NODE_VERSION = "20"

Prerequisites

  • Netlify account
  • GitHub repository
  • Node.js 18+
  • React 18+ with Vite

Deployment Steps

  • Create React app: npm create vite@latest my-app -- --template react-ts
  • Create Netlify site
  • Get Site ID and Auth Token
  • Add GitHub Secrets
  • Create netlify.toml
  • Create .github/workflows/deploy.yml
  • Push to deploy

Additional Notes

  • ⚡ Optimized for React SPAs
  • 🌍 Global CDN
  • 🔄 Deploy previews
  • 💰 Free tier generous
  • 📦 Asset optimization
  • 🚀 Edge Functions support
  • 🔒 HTTPS included