Fix Vercel deployment issues: Replace hardcoded localhost URLs and implement dynamic API configuration

.env.local

@@ -16,4 +16,5 @@ STRIPE_PRO_PRICE_ID=price_demo_pro
 # API Configuration
 NODE_ENV=development
 PORT=3001
-FRONTEND_URL=http://localhost:5174
+FRONTEND_URL=http://localhost:5173
+VITE_API_BASE_URL=http://localhost:3001

DEPLOYMENT.md

@@ -41,6 +41,7 @@ This guide will help you deploy ContentFlow to production and start generating r
    VITE_SUPABASE_URL=https://your-project.supabase.co
    VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
    VITE_STRIPE_PUBLISHABLE_KEY=pk_live_...
+   VITE_API_BASE_URL=https://your-api-domain.vercel.app
    ```
 
 3. **Configure Domain** (Optional)

VERCEL_DEPLOYMENT_GUIDE.md

@@ -0,0 +1,134 @@
+# 🚀 Fixed Vercel Deployment Guide
+
+## Issues that were fixed:
+- ❌ Hardcoded `localhost:3001` URLs in all components
+- ❌ CORS only allowing localhost origins  
+- ❌ Missing production environment variable configuration
+- ❌ CSS import order causing build warnings
+- ❌ No dynamic API URL resolution
+
+## ✅ What's now fixed:
+- ✅ Dynamic API URL configuration
+- ✅ Production-ready CORS settings
+- ✅ Clean builds without warnings
+- ✅ Environment-based URL resolution
+- ✅ Proper Vercel configuration
+
+## 📝 Deployment Steps:
+
+### 1. Deploy Frontend to Vercel
+
+1. **Connect your GitHub repo to Vercel:**
+   - Go to [vercel.com](https://vercel.com)
+   - Click "Import Project" 
+   - Select your `contentflow` repository
+   - Framework: **React** (Vite)
+   - Build Command: `npm run build`
+   - Output Directory: `dist`
+
+2. **Set Environment Variables in Vercel Dashboard:**
+   ```
+   VITE_SUPABASE_URL=https://your-project.supabase.co
+   VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
+   VITE_STRIPE_PUBLISHABLE_KEY=pk_test_your_key
+   VITE_API_BASE_URL=https://your-api-domain.vercel.app
+   ```
+
+3. **Deploy** - Vercel will build and deploy automatically
+
+### 2. Deploy API to Vercel (Separate Project)
+
+1. **Create new Vercel project for API:**
+   - Import the same GitHub repo
+   - Set **Root Directory** to `api`
+   - Framework: **Node.js**
+   - Build Command: `npm install`
+   - Output Directory: `./`
+
+2. **Set API Environment Variables:**
+   ```
+   OPENAI_API_KEY=sk-your-openai-key
+   VITE_SUPABASE_URL=https://your-project.supabase.co
+   SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
+   STRIPE_SECRET_KEY=sk_test_your_key
+   STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret
+   STRIPE_CREATOR_PRICE_ID=price_your_creator_id
+   STRIPE_PRO_PRICE_ID=price_your_pro_id
+   FRONTEND_URL=https://your-frontend-domain.vercel.app
+   NODE_ENV=production
+   ```
+
+### 3. Update Frontend Environment Variable
+
+After API is deployed, update the frontend's `VITE_API_BASE_URL`:
+- Go to your frontend Vercel project settings
+- Update `VITE_API_BASE_URL=https://your-actual-api-domain.vercel.app`
+- Redeploy the frontend
+
+### 4. Test the Deployment
+
+1. **Check Frontend:** Visit your frontend URL
+2. **Check API Health:** Visit `https://your-api-domain.vercel.app/api/health`
+3. **Test CORS:** API now accepts requests from your frontend domain
+
+## 🔧 Key Technical Fixes Applied:
+
+### Dynamic API Configuration
+```javascript
+// src/config/api.js - NEW FILE
+export const getApiBaseUrl = () => {
+  if (import.meta.env.PROD) {
+    return import.meta.env.VITE_API_BASE_URL || 'https://contentflow-api.vercel.app'
+  }
+  return import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001'
+}
+```
+
+### Flexible CORS Configuration
+```javascript
+// api/server.js - UPDATED
+const allowedOrigins = [
+  'http://localhost:5173', 
+  'http://localhost:3000',
+  'https://contentflow.vercel.app',
+  'https://contentflow-frontend.vercel.app'
+]
+
+if (process.env.FRONTEND_URL) {
+  allowedOrigins.push(process.env.FRONTEND_URL)
+}
+```
+
+### Fixed Components
+All components now use centralized API configuration:
+- ✅ SubscriptionManager.jsx
+- ✅ AdminDashboard.jsx  
+- ✅ Dashboard.jsx
+- ✅ ContentHistory.jsx
+- ✅ PromoBanner.jsx
+
+## 🚨 Important Notes:
+
+1. **Two Separate Vercel Projects Required:**
+   - Frontend project (root directory)
+   - API project (api/ subdirectory)
+
+2. **Environment Variables are Critical:**
+   - Frontend needs `VITE_API_BASE_URL` pointing to API
+   - API needs `FRONTEND_URL` pointing to frontend
+
+3. **Build Order:**
+   - Deploy API first to get its URL
+   - Then deploy frontend with API URL configured
+
+## 🎯 No More "SAME ERROR"!
+
+The common deployment errors were:
+- ❌ `localhost:3001` not accessible in production
+- ❌ CORS blocking requests between domains
+- ❌ Missing environment variables
+- ❌ CSS build warnings
+
+All of these are now **FIXED** ✅
+
+Your deployment should now work smoothly! 🚀

api/server.js

@@ -20,8 +20,29 @@ export const supabase = createClient(
 )
 
 // Middleware
+const allowedOrigins = [
+  'http://localhost:5173', 
+  'http://localhost:3000',
+  'https://contentflow.vercel.app',
+  'https://contentflow-frontend.vercel.app'
+]
+
+// Add environment variable for frontend URL if provided
+if (process.env.FRONTEND_URL) {
+  allowedOrigins.push(process.env.FRONTEND_URL)
+}
+
 app.use(cors({
-  origin: ['http://localhost:5173', 'http://localhost:3000'],
+  origin: function (origin, callback) {
+    // Allow requests with no origin (like mobile apps or curl requests)
+    if (!origin) return callback(null, true)
+
+    if (allowedOrigins.indexOf(origin) !== -1) {
+      callback(null, true)
+    } else {
+      callback(new Error('Not allowed by CORS'))
+    }
+  },
   credentials: true
 }))
 app.use(express.json({ limit: '10mb' }))

api/vercel.json

@@ -20,6 +20,7 @@
     "STRIPE_WEBHOOK_SECRET": "@stripe_webhook_secret",
     "STRIPE_CREATOR_PRICE_ID": "@stripe_creator_price_id",
     "STRIPE_PRO_PRICE_ID": "@stripe_pro_price_id",
-    "FRONTEND_URL": "@frontend_url"
+    "FRONTEND_URL": "@frontend_url",
+    "NODE_ENV": "production"
   }
 }

dist/index.html

@@ -5,12 +5,12 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ContentFlow - AI Content Repurposing Tool</title>
-    <script type="module" crossorigin src="/assets/index-BTgx3oLx.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/vendor-T8osx3Jj.js">
-    <link rel="modulepreload" crossorigin href="/assets/ui-CZBkdTqY.js">
-    <link rel="modulepreload" crossorigin href="/assets/supabase-Ch0sirx8.js">
-    <link rel="modulepreload" crossorigin href="/assets/router-Dyxtdz5J.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-Dj7fSDCK.css">
+    <script type="module" crossorigin src="/assets/index-CdxA7jWp.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/vendor-NuYkQVOp.js">
+    <link rel="modulepreload" crossorigin href="/assets/ui-B1g3F0Qu.js">
+    <link rel="modulepreload" crossorigin href="/assets/supabase-B-TuLt8T.js">
+    <link rel="modulepreload" crossorigin href="/assets/router-G9zlSsQi.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-DkhEkmAB.css">
   </head>
   <body>
     <div id="root"></div>