Grafana + Prometheus Setup for Monitoring (Beginner Guide)

1. Introduction

React ek popular JavaScript library hai jiska use karke hum fast aur interactive web applications bana sakte hain. Is guide mein hum step by step dekhenge ki React website ko free mein Vercel aur Netlify par kaise deploy karein.

Modern cloud hosting platforms jaise Vercel direct GitHub integration provide karte hain. Jaise hi aap naya code branch par push karenge, continuous integration pipelines automatic build trigger karke aapki site ko live kar deti hain.

2. What You Need

Node.js installed on your system (v18 ya latest)
GitHub account
Vercel account (free tier)
A React project (Vite ya Create React App)

3. Step 1: Project Setup

Sabse pehle ek naya React project banayein ya existing project use karein. Terminal mein check karein:

bash

# Check Node version
node -v

# Install Vite (if not installed)
npm create vite@latest my-app
cd my-app
npm install

4. Step 2: Build the Project

Deploy karne se pehle local build verify karna zaroori hai taaki production environment mein koi missing dependencies ya build syntax failure na aaye:

bash

npm run build

5. Step 3: Deploy to Vercel

GitHub par repository create karke code push karein. Iske baad Vercel dashboard mein jakar Import Git Repository select karein. Build settings auto-detect ho jaati hain. Click Deploy!

6. Common Issues & Routing Fix

Agar client-side routing (React Router) mein page refresh karne par 404 error aaye, toh root directory mein ek `vercel.json` file create karein:

json

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

7. Conclusion

Aapki React application safely live ho chuki hai. Vercel automatically SSL certificate provide karta hai aur har pull request par preview URL generate karta hai.