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)

npm install -g vercel

2. Create vercel.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:

{
  "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

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

[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:

[build]
  command = "npm run build"
  publish = "dist"

2. Convert API Routes to Netlify Functions

Create netlify/functions/odoo.js:

// 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

// 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

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)

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:

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

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):

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):

export default {
  base: '/your-repo-name/'
};

2. Create .github/workflows/deploy.yml

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

git add .
git commit -m "Add GitHub Pages deployment"
git push origin main

---

Environment Variables Reference

Required for All Platforms:

# 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