React Apps के लिए Basic CI/CD

CI/CD एक robot assistant जैसा है जो अपने आप आपका homework check करता है और आपके खत्म करते ही इसे turn in कर देता है, बजाय आपके हर बार इसे manually करने के।

In this page:

CI/CD क्या Automate करता है
एक Typical React App Pipeline
Automatic Deployment जोड़ना

Syntax

markup

name: CI
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm test
      - run: npm run build

CI/CD क्या Automate करता है

Continuous Integration हर बार code push होने पर अपने आप आपकी test suite, linter, और build process चलाता है, problems को तुरंत पकड़ते हुए बजाय किसी के manually check करना याद रखने पर निर्भर रहने के।

Continuous Deployment इसे और आगे ले जाता है, सभी checks pass करने वाले code को सीधे production में अपने आप deploy करते हुए।

Note: एक simple CI setup भी (सिर्फ हर push पर tests चलाना) असली users तक पहुंचने से पहले surprisingly कई bugs पकड़ता है।

Warning: CI/CD pipelines एक remote service (जैसे GitHub Actions) पर चलते हैं — इन्हें इस code preview के अंदर live demonstrate नहीं किया जा सकता।

एक Typical React App Pipeline

एक React app के लिए एक common pipeline order में चलता है: dependencies install करना, linter चलाना (style/quality issues पकड़ते हुए), test suite चलाना (functional regressions पकड़ते हुए), फिर production bundle build करना — deployment तक सिर्फ तब बढ़ते हुए जब हर step succeed हो।

Note: इन steps को order में चलाना (fastest/cheapest checks पहले, जैसे linting, slower वालों से पहले जैसे पूरी test suite) fast fail करता है और CI time बचाता है।

Warning: एक pipeline जो tests चलाना skip करता है ('faster pass' करने के लिए) false confidence देता है — एक green checkmark जिसका असल में मतलब नहीं है कि code verified working है।

उदाहरण: A GitHub Actions CI Pipeline

bash

$ cat .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint
      - run: npm test
      - run: npm run build

⚠️ Run this in your own terminal or Node.js environment.

Automatic Deployment जोड़ना

एक CI pipeline को एक deployment step के साथ extend करना (अक्सर सिर्फ main branch पर trigger होता है, सभी checks pass होने के बाद) Continuous Deployment implement करता है — main में merge करना अपने आप एक live, updated production site में result करता है, बिना किसी manual deploy step के।

Note: कई hosting platforms (Netlify, Vercel) आपके Git repository से connect होने के बाद ही अपने आप यह provide करते हैं, बिना खुद custom GitHub Actions deploy steps लिखे।

Warning: Main पर हर push पर automatic deployment का मतलब है कि एक broken (लेकिन किसी तरह test-passing) change जल्दी production तक पहुंच सकता है — एक thorough test suite ही इसे safe बनाता है।

उदाहरण: Adding a Deploy Step to CI

bash

$ cat .github/workflows/ci.yml
      - run: npm run build
      - name: Deploy to Netlify
        if: github.ref == 'refs/heads/main'
        run: npx netlify-cli deploy --prod --dir=dist
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

⚠️ Run this in your own terminal or Node.js environment.

Chapter Quiz — Complete all 13 topics to unlock

0/13 topics done

Complete these topics first:

← Previous Lesson Deploying to Vercel Next Lesson → SEO Basics for React SPAs

React Apps के लिए Basic CI/CD

CI/CD क्या Automate करता है

एक Typical React App Pipeline

Automatic Deployment जोड़ना

Chapter Quiz — Complete all 13 topics to unlock

Login to run this code