Initial commit
This commit is contained in:
Zhongwei Li
534
commands/add-deployment.md
Normal file
534
commands/add-deployment.md
Normal file
@@ -0,0 +1,534 @@
|
||||
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
|
||||
Reference in New Issue
Block a user