wehub-resource-sync
67 lines
1.9 KiB
Markdown
67 lines
1.9 KiB
Markdown
---
|
|
allowed-tools: Read, Write, Edit, Bash
|
|
argument-hint:
|
|
description: Set up Vercel Analytics and Speed Insights for React/Vite projects
|
|
---
|
|
|
|
# Vercel Analytics Setup
|
|
|
|
Automatically configure Vercel Analytics and Speed Insights for your React/Vite project.
|
|
|
|
**Usage:** `/vercel-analytics` (no arguments needed)
|
|
|
|
**What it does:**
|
|
- Installs @vercel/analytics and @vercel/speed-insights packages
|
|
- Adds components to your React app
|
|
- Configures SPA routing for Vercel deployment
|
|
- Fixes 404 errors for direct route access
|
|
|
|
**Process:**
|
|
|
|
1. **Install Vercel Packages**
|
|
```bash
|
|
npm install @vercel/analytics @vercel/speed-insights
|
|
```
|
|
|
|
2. **Detect Main App File**
|
|
- Search for main React entry point:
|
|
- `src/App.tsx` or `src/App.jsx`
|
|
- `src/main.tsx` or `src/main.jsx`
|
|
- Read file to determine current structure
|
|
|
|
3. **Add Analytics Components**
|
|
- Import Analytics from '@vercel/analytics/react'
|
|
- Import SpeedInsights from '@vercel/speed-insights/react'
|
|
- Add both components to the main App component
|
|
- Use `/react` imports (not `/next`)
|
|
|
|
4. **Create vercel.json Configuration**
|
|
- Create `vercel.json` in project root
|
|
- Add SPA rewrite rules:
|
|
```json
|
|
{
|
|
"rewrites": [
|
|
{ "source": "/(.*)", "destination": "/index.html" }
|
|
]
|
|
}
|
|
```
|
|
- This ensures all routes serve index.html (fixes 404s)
|
|
|
|
5. **Verify Setup**
|
|
- Confirm components are properly imported
|
|
- Check vercel.json exists and is valid
|
|
- Display success message with next steps
|
|
|
|
**Expected Outcome:**
|
|
- ✅ Analytics tracking active
|
|
- ✅ Speed Insights monitoring configured
|
|
- ✅ SPA routing works correctly on Vercel
|
|
- ✅ No 404 errors on direct route access
|
|
|
|
**Next Steps:**
|
|
1. Deploy to Vercel: `vercel deploy`
|
|
2. View analytics at: https://vercel.com/dashboard/analytics
|
|
3. Check Speed Insights: https://vercel.com/dashboard/speed-insights
|
|
|
|
**Note**: Works with React, Vite, Create React App, and other SPA frameworks.
|