gh-jamshu-jamshi-marketplace-plugins-odoo-pwa-generator/commands/add-deployment.md

Add a new deployment target to your existing Odoo PWA project.

## What this command does:
- Adds deployment configuration for new platforms
- Creates necessary config files
- Sets up CI/CD workflows
- Provides deployment instructions
- Configures environment variables

## Supported Deployment Targets

### Primary (Recommended)
- ✅ **Vercel** - Best for full-stack PWAs (API routes work)
- ✅ **Netlify** - Great for static + serverless functions
- ✅ **Cloudflare Pages** - Fast global CDN, edge functions

### Secondary (Static Only)
- ⚠️ **GitHub Pages** - Free, but no server-side code
- ⚠️ **Cloudflare Pages (Static)** - Without edge functions
- ⚠️ **AWS S3 + CloudFront** - Static hosting only

---

## Prerequisites

Before adding deployment:

```
□ Project builds successfully (npm run build)
□ Odoo connection tested and working
□ Environment variables documented
□ Git repository initialized
□ Code committed to version control
```

---

## Add Vercel Deployment 🔷

### What You'll Get:
- Automatic deployments from Git
- Serverless API routes
- Preview deployments for PRs
- Environment variable management
- Custom domains
- Analytics and logs

### Steps:

#### 1. Install Vercel CLI (Optional)
```bash
npm install -g vercel
```

#### 2. Create `vercel.json`
```json
{
  "buildCommand": "npm run build",
  "outputDirectory": "build",
  "framework": "sveltekit",
  "installCommand": "npm install",
  "devCommand": "npm run dev",
  "env": {
    "VITE_ODOO_URL": "@vite_odoo_url",
    "VITE_ODOO_DB": "@vite_odoo_db",
    "VITE_MODEL_NAME": "@vite_model_name",
    "VITE_MODEL_DISPLAY_NAME": "@vite_model_display_name"
  },
  "build": {
    "env": {
      "ODOO_API_KEY": "@odoo_api_key",
      "ODOO_USERNAME": "@odoo_username"
    }
  }
}
```

For React/Vue:
```json
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite"
}
```

#### 3. Create `.vercelignore`
```
node_modules
.env
.env.local
*.log
.DS_Store
```

#### 4. Deployment Options

**Option A: Vercel Dashboard (Recommended for first time)**
1. Go to https://vercel.com/new
2. Connect your Git repository
3. Vercel auto-detects framework
4. Add environment variables:
   - `VITE_ODOO_URL`
   - `VITE_ODOO_DB`
   - `ODOO_API_KEY`
   - `ODOO_USERNAME`
   - `VITE_MODEL_NAME`
   - `VITE_MODEL_DISPLAY_NAME`
5. Click "Deploy"

**Option B: Vercel CLI**
```bash
vercel login
vercel

# Follow prompts
# Add environment variables when asked
# Or add them later in dashboard
```

**Option C: Continuous Deployment**
1. Connect repository to Vercel
2. Every push to `main` auto-deploys
3. PRs get preview deployments

#### 5. Configure Environment Variables
In Vercel Dashboard:
1. Go to Project Settings
2. Environment Variables tab
3. Add each variable:
   - Production
   - Preview (optional)
   - Development (optional)

#### 6. Test Deployment
1. Wait for build to complete
2. Visit deployed URL
3. Test Odoo connection
4. Verify all features work
5. Check browser console for errors

---

## Add Netlify Deployment 🟢

### What You'll Get:
- Git-based deployments
- Serverless functions
- Form handling
- Split testing
- Deploy previews
- Custom domains

### Steps:

#### 1. Create `netlify.toml`
```toml
[build]
  command = "npm run build"
  publish = "build"

[build.environment]
  NODE_VERSION = "18"

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

[functions]
  directory = "netlify/functions"
```

For React/Vue:
```toml
[build]
  command = "npm run build"
  publish = "dist"
```

#### 2. Convert API Routes to Netlify Functions

Create `netlify/functions/odoo.js`:
```javascript
// Copy your API route logic here
// Netlify functions use different format

exports.handler = async (event, context) => {
  // Parse request
  const body = JSON.parse(event.body);

  // Your Odoo logic here
  // (copy from src/routes/api/odoo/+server.js)

  return {
    statusCode: 200,
    body: JSON.stringify(result)
  };
};
```

#### 3. Update Client to Use Netlify Function
```javascript
// Change API endpoint
const response = await fetch('/.netlify/functions/odoo', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});
```

#### 4. Deploy

**Option A: Netlify Dashboard**
1. Go to https://app.netlify.com/start
2. Connect repository
3. Configure build settings
4. Add environment variables
5. Deploy

**Option B: Netlify CLI**
```bash
npm install -g netlify-cli
netlify login
netlify init
netlify deploy --prod
```

---

## Add Cloudflare Pages Deployment 🟠

### What You'll Get:
- Global CDN
- Unlimited bandwidth
- Edge functions
- Preview deployments
- Web Analytics
- Fast performance

### Steps:

#### 1. Create `wrangler.toml` (for edge functions)
```toml
name = "odoo-pwa"
compatibility_date = "2025-01-01"

[build]
command = "npm run build"

[build.upload]
format = "service-worker"
```

#### 2. Convert API Routes to Workers

Create `functions/odoo.js`:
```javascript
export async function onRequest(context) {
  const { request, env } = context;

  // Parse request
  const body = await request.json();

  // Odoo logic here
  // Access env vars via env.ODOO_API_KEY

  return new Response(JSON.stringify(result), {
    headers: { 'Content-Type': 'application/json' }
  });
}
```

#### 3. Deploy

**Option A: Cloudflare Dashboard**
1. Go to Cloudflare Pages
2. Connect Git repository
3. Configure build:
   - Build command: `npm run build`
   - Output: `build` or `dist`
4. Add environment variables
5. Deploy

**Option B: Wrangler CLI**
```bash
npm install -g wrangler
wrangler login
wrangler pages project create odoo-pwa
wrangler pages publish build
```

---

## Add GitHub Pages Deployment 📘

### ⚠️ Limitations:
- Static hosting only
- No server-side API routes
- Must modify Odoo client for direct API calls
- CORS issues possible

### When to Use:
- Demo projects
- Public apps (no sensitive data)
- Frontend-only versions

### Steps:

#### 1. Update Base Path

**SvelteKit** (`svelte.config.js`):
```javascript
const config = {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: 'index.html'
    }),
    paths: {
      base: process.env.NODE_ENV === 'production'
        ? '/your-repo-name'
        : ''
    }
  }
};
```

**React/Vue** (`vite.config.js`):
```javascript
export default {
  base: '/your-repo-name/'
};
```

#### 2. Create `.github/workflows/deploy.yml`
```yaml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - run: npm install

      - run: npm run build
        env:
          VITE_ODOO_URL: ${{ secrets.VITE_ODOO_URL }}
          VITE_ODOO_DB: ${{ secrets.VITE_ODOO_DB }}
          VITE_MODEL_NAME: ${{ secrets.VITE_MODEL_NAME }}

      - uses: actions/upload-pages-artifact@v3
        with:
          path: build

  deploy:
    runs-on: ubuntu-latest
    needs: build

    steps:
      - uses: actions/deploy-pages@v4
```

#### 3. Configure Repository
1. Go to Settings → Pages
2. Source: GitHub Actions
3. Save

#### 4. Add Secrets
1. Settings → Secrets and variables → Actions
2. Add each environment variable

#### 5. Push to Deploy
```bash
git add .
git commit -m "Add GitHub Pages deployment"
git push origin main
```

---

## Environment Variables Reference

### Required for All Platforms:
```bash
# Public (VITE_ prefix for client access)
VITE_ODOO_URL=https://yourcompany.odoo.com
VITE_ODOO_DB=yourcompany-main
VITE_MODEL_NAME=x_expense
VITE_MODEL_DISPLAY_NAME=Expense

# Private (server-side only)
ODOO_API_KEY=your_production_api_key
ODOO_USERNAME=your.email@company.com
```

### Platform-Specific:

**Vercel:**
- Add in Project Settings → Environment Variables
- Separate for Production/Preview/Development

**Netlify:**
- Add in Site Settings → Environment Variables
- Or in `netlify.toml`

**Cloudflare:**
- Add in Pages → Settings → Environment Variables
- Or use Wrangler secrets

**GitHub Pages:**
- Add in Repository Settings → Secrets
- Used in GitHub Actions workflow

---

## Post-Deployment Checklist ✅

After deploying to new platform:

```
□ Build completed successfully
□ Application loads at deployment URL
□ Odoo connection works
□ Data syncs correctly
□ CRUD operations work
□ Offline mode functions
□ Service worker registered
□ PWA installs correctly
□ Environment variables set correctly
□ No console errors
□ Tested on mobile
□ Custom domain configured (if needed)
```

---

## Multi-Platform Deployment

### Deploy to Multiple Platforms:
You can deploy the same app to multiple platforms for:
- Redundancy
- A/B testing
- Different regions
- Different audiences

### Example Setup:
```
main branch → Vercel (primary production)
staging branch → Netlify (staging)
PRs → Vercel preview deployments
```

---

## Troubleshooting Deployment

### Build Fails
- Check build logs
- Test `npm run build` locally
- Verify Node version matches
- Check for missing env vars

### App Loads but Doesn't Work
- Check environment variables are set
- Look at browser console errors
- Verify API routes deployed correctly
- Test Odoo connection

### API Routes Not Working
- Verify platform supports server-side code
- Check function logs
- Ensure correct paths used
- Test API endpoint directly

---

## Example prompts to use this command:
- `/add-deployment` - Add new deployment target
- User: "Deploy to Netlify"
- User: "Add Cloudflare deployment"
- User: "Set up continuous deployment"

## Related Commands:
- `/deploy-vercel` - Deploy to Vercel
- `/deploy-github` - Deploy to GitHub Pages
- `/test-connection` - Test before deploying
- `/optimize` - Optimize before production

---

## Best Practices

1. **Use Git-Based Deployment**
   - Automatic on push
   - Preview deployments
   - Easy rollbacks

2. **Separate Environments**
   - Development
   - Staging
   - Production

3. **Secure Secrets**
   - Never commit API keys
   - Use platform secret management
   - Rotate keys regularly

4. **Monitor Deployments**
   - Set up error tracking
   - Monitor performance
   - Watch build times

5. **Test Before Merging**
   - Use preview deployments
   - Test all features
   - Check on real devices