miracles_in_motion/docs/deployment/COMPLETE_NEXT_STEPS.md

# 🚀 Complete Next Steps - Full Deployment Guide

**Date:** November 12, 2025  
**Objective:** Ensure ALL endpoints are fully deployed and operational

---

## 📊 Current Status Summary

### ✅ Infrastructure: COMPLETE
- All 9 Azure resources deployed
- Static Web App: Created (Standard SKU) 
- Function App: Created and running
- Configuration: Complete

### ⚠️ Application Deployment: NEEDS ACTION
- **Static Web App:** Shows default Azure page (needs frontend deployment)
- **Function App:** Service unavailable (needs proper deployment)
- **Endpoints:** Not fully operational yet

---

## 🎯 CRITICAL: Immediate Deployment Steps

### Step 1: Deploy Frontend to Static Web App ⚠️ HIGH PRIORITY

**Current Issue:** Static Web App shows Azure default page instead of your React application.

**Best Solution: Use GitHub Actions (Recommended)**

You have a GitHub repository connected with a production deployment workflow. This is the most reliable method:

```bash
# Option A: Trigger GitHub Actions deployment
git add .
git commit -m "Deploy to production - ensure endpoints operational"
git push origin main

# The workflow will automatically:
# - Build frontend and API
# - Deploy to Static Web App
# - Deploy Function App functions
# - Run smoke tests
```

**Alternative: Azure Portal Deployment**

1. Go to: https://portal.azure.com
2. Navigate to: Static Web App → `mim-prod-igiay4-web`
3. Go to: **Deployment Center**
4. Choose: **Upload** or **Connect to GitHub**
5. Upload: `swa-deploy.zip` (already created) or connect repository

**Alternative: Fix SWA CLI**

The config has been fixed. Try:
```bash
DEPLOY_TOKEN=$(az staticwebapp secrets list \
  --name mim-prod-igiay4-web \
  --resource-group rg-miraclesinmotion-prod \
  --query "properties.apiKey" -o tsv)

swa deploy ./dist \
  --env production \
  --deployment-token $DEPLOY_TOKEN \
  --no-use-keychain
```

**Verify:**
```bash
# Should show your React app HTML, not Azure default page
curl https://lemon-water-015cb3010.3.azurestaticapps.net | grep -i "miracles\|react\|vite"
```

---

### Step 2: Deploy Function App Code ⚠️ HIGH PRIORITY

**Current Issue:** Function App shows "service unavailable" - needs proper function deployment.

**Deployment Steps:**

```bash
# 1. Build API
cd api
npm run build
cd ..

# 2. Create proper deployment package (includes host.json)
cd api
mkdir -p deploy-package
cp -r dist/* deploy-package/
cp host.json deploy-package/
cp package.json deploy-package/
cd deploy-package
zip -r ../../api-func-deploy-proper.zip .
cd ../..

# 3. Deploy to Function App
az functionapp deployment source config-zip \
  --resource-group rg-miraclesinmotion-prod \
  --name mim-prod-igiay4-func \
  --src api-func-deploy-proper.zip

# 4. Restart Function App
az functionapp restart \
  --name mim-prod-igiay4-func \
  --resource-group rg-miraclesinmotion-prod

# 5. Wait a moment, then test
sleep 10
curl https://mim-prod-igiay4-func.azurewebsites.net
```

**Verify Functions:**
```bash
# Test function endpoints
curl https://mim-prod-igiay4-func.azurewebsites.net/api/donations
curl https://mim-prod-igiay4-func.azurewebsites.net/api/health

# Check Function App status
az functionapp show \
  --name mim-prod-igiay4-func \
  --resource-group rg-miraclesinmotion-prod \
  --query "{state:state, defaultHostName:defaultHostName}"
```

---

## ✅ Verification Steps

### Step 3: Verify All Endpoints Are Operational

**Comprehensive Testing:**

```bash
# 1. Static Web App - should show your app
echo "=== Testing Static Web App ==="
curl -I https://lemon-water-015cb3010.3.azurestaticapps.net
curl -s https://lemon-water-015cb3010.3.azurestaticapps.net | head -20

# 2. Function App - should respond
echo "=== Testing Function App ==="
curl -I https://mim-prod-igiay4-func.azurewebsites.net
curl -s https://mim-prod-igiay4-func.azurewebsites.net

# 3. API Endpoints - should return JSON
echo "=== Testing API Endpoints ==="
curl https://mim-prod-igiay4-func.azurewebsites.net/api/donations
curl https://mim-prod-igiay4-func.azurewebsites.net/api/health

# 4. Run automated tests
bash scripts/test-deployment.sh
```

**Success Criteria:**
- ✅ Static Web App returns your React application HTML
- ✅ Function App responds (200 OK or function responses)
- ✅ API endpoints return JSON or proper responses
- ✅ No "service unavailable" errors
- ✅ No Azure default pages

---

## 🔧 Configuration Verification

### Step 4: Verify All Settings

**Check Environment Variables:**
```bash
# Static Web App
az staticwebapp appsettings list \
  --name mim-prod-igiay4-web \
  --resource-group rg-miraclesinmotion-prod

# Function App
az functionapp config appsettings list \
  --name mim-prod-igiay4-func \
  --resource-group rg-miraclesinmotion-prod \
  --query "[?name=='KEY_VAULT_URL' || name=='APPINSIGHTS_INSTRUMENTATIONKEY' || name=='STRIPE_SECRET_KEY']"
```

**Update if Missing:**
```bash
# Ensure all required settings are present
# (Already configured, but verify)
```

---

## ☁️ Cloudflare Setup

### Step 5: Complete Cloudflare Configuration

**When Ready:**
1. Add credentials to `.env.production`:
   ```
   CLOUDFLARE_API_TOKEN=your-token
   CLOUDFLARE_ZONE_ID=your-zone-id
   ```

2. Run automation:
   ```bash
   bash scripts/setup-cloudflare-auto.sh
   ```

**What it configures:**
- DNS records
- SSL/TLS
- Security settings
- Performance optimizations

---

## 🌐 Custom Domain

### Step 6: Configure Custom Domain

**After Cloudflare or DNS is ready:**
```bash
az staticwebapp hostname set \
  --name mim-prod-igiay4-web \
  --resource-group rg-miraclesinmotion-prod \
  --hostname "mim4u.org"

az staticwebapp hostname set \
  --name mim-prod-igiay4-web \
  --resource-group rg-miraclesinmotion-prod \
  --hostname "www.mim4u.org"
```

---

## 📋 Complete Deployment Checklist

### Critical (Do Now)
- [ ] **Deploy Frontend** - Static Web App needs your application
- [ ] **Deploy Functions** - Function App needs function code
- [ ] **Verify Endpoints** - Ensure all respond correctly
- [ ] **Test Functionality** - Verify API endpoints work

### Important (Do Next)
- [ ] **Complete Cloudflare** - Performance and security
- [ ] **Configure Custom Domain** - Professional URL
- [ ] **Final Testing** - Comprehensive verification

### Optional (Can Do Later)
- [ ] **Performance Optimization** - Fine-tune response times
- [ ] **Additional Monitoring** - More detailed alerts

---

## 🚀 Quick Deployment Script

**Complete deployment in one command sequence:**

```bash
#!/bin/bash
# Complete Deployment Script

set -e

echo "🚀 Starting Complete Deployment"

# 1. Build everything
echo "📦 Building applications..."
npm run build
cd api && npm run build && cd ..

# 2. Deploy Function App
echo "⚡ Deploying Function App..."
cd api
mkdir -p deploy-package
cp -r dist/* deploy-package/
cp host.json deploy-package/
cp package.json deploy-package/
cd deploy-package
zip -r ../../api-func-deploy-proper.zip .
cd ../..
az functionapp deployment source config-zip \
  --resource-group rg-miraclesinmotion-prod \
  --name mim-prod-igiay4-func \
  --src api-func-deploy-proper.zip
az functionapp restart \
  --name mim-prod-igiay4-func \
  --resource-group rg-miraclesinmotion-prod

# 3. Deploy Static Web App (choose method)
echo "🌐 Deploying Static Web App..."
# Option A: GitHub Actions (recommended)
echo "Push to GitHub to trigger deployment, or use Azure Portal"

# Option B: SWA CLI
DEPLOY_TOKEN=$(az staticwebapp secrets list \
  --name mim-prod-igiay4-web \
  --resource-group rg-miraclesinmotion-prod \
  --query "properties.apiKey" -o tsv)
swa deploy ./dist \
  --env production \
  --deployment-token $DEPLOY_TOKEN \
  --no-use-keychain || echo "SWA CLI failed, use Azure Portal"

# 4. Verify
echo "✅ Verifying deployment..."
sleep 15
curl -I https://lemon-water-015cb3010.3.azurestaticapps.net
curl -I https://mim-prod-igiay4-func.azurewebsites.net

echo "🎉 Deployment complete!"
```

---

## 📊 Expected Results After Deployment

### Static Web App
- **Before:** Azure default page
- **After:** Your React application with Miracles in Motion content
- **URL:** https://lemon-water-015cb3010.3.azurestaticapps.net

### Function App
- **Before:** "Service unavailable"
- **After:** Function responses or proper API endpoints
- **URL:** https://mim-prod-igiay4-func.azurewebsites.net

### API Endpoints
- **Before:** 404 or unavailable
- **After:** JSON responses from your functions
- **Endpoints:**
  - `/api/donations`
  - `/api/health`
  - Other function endpoints

---

## 🆘 Troubleshooting

### Static Web App Still Shows Default Page
**Solutions:**
1. Use Azure Portal → Deployment Center → Upload zip
2. Connect GitHub repository for automatic deployments
3. Check deployment history in Azure Portal

### Function App Still Unavailable
**Solutions:**
1. Verify deployment package includes `host.json`
2. Check Function App logs in Azure Portal
3. Restart Function App: `az functionapp restart`
4. Verify app settings are correct

### Endpoints Not Responding
**Solutions:**
1. Check Function App state: `az functionapp show`
2. Review logs: Azure Portal → Function App → Logs
3. Verify CORS settings if needed
4. Check Application Insights for errors

---

## ✅ Success Criteria

**Deployment is COMPLETE when:**

- [x] Infrastructure deployed ✅
- [ ] Static Web App shows your application ⚠️
- [ ] Function App responds correctly ⚠️
- [ ] All API endpoints work ⚠️
- [x] Configuration verified ✅
- [x] Monitoring active ✅

---

## 📚 Reference

- **Detailed Next Steps:** `NEXT_STEPS_COMPLETE.md`
- **Deployment Status:** `DEPLOYMENT_STATUS.md`
- **GitHub Actions:** `.github/workflows/production-deployment.yml`

---

## 🎯 Recommended Action Plan

1. **IMMEDIATE:** Deploy via GitHub Actions (push to main) OR Azure Portal
2. **IMMEDIATE:** Deploy Function App code with proper package
3. **VERIFY:** Test all endpoints
4. **THEN:** Complete Cloudflare setup
5. **THEN:** Configure custom domain

---

**🚀 Focus: Deploy frontend and Function App code to make all endpoints fully operational!**

**Next Action:** 
- **Option 1 (Recommended):** Push to GitHub to trigger automatic deployment
- **Option 2:** Use Azure Portal to deploy Static Web App
- **Option 3:** Deploy Function App code using the proper package structure