miracles_in_motion/docs/deployment/ALL_NEXT_STEPS.md

# 🚀 All Next Steps - Complete Deployment Guide

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

---

## 📊 Current Deployment Status

### ✅ COMPLETE
- **Infrastructure:** All 9 Azure resources deployed and verified
- **Configuration:** Key Vault, Azure AD, environment variables configured
- **Monitoring:** Application Insights and alerts active
- **Builds:** Frontend and API built successfully
- **Function App:** Created and responding

### ⚠️ NEEDS DEPLOYMENT
- **Static Web App:** Shows Azure default page (needs React app deployment)
- **Function App Functions:** Need to be registered and deployed
- **Endpoints:** Not fully operational yet

---

## 🎯 CRITICAL: Complete Application Deployment

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

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

**✅ RECOMMENDED: Use GitHub Actions (Automatic)**

You have a production deployment workflow configured. This is the most reliable method:

```bash
# 1. Commit all changes
git add .
git commit -m "Deploy to production - ensure all endpoints operational"

# 2. Push to trigger automatic deployment
git push origin main

# 3. Monitor deployment
# Go to: https://github.com/Miracles-In-Motion/public-web/actions
# Watch the "Production Deployment" workflow
```

**What GitHub Actions will do:**
- ✅ Build frontend application
- ✅ Build API
- ✅ Deploy to Static Web App
- ✅ Deploy Function App functions
- ✅ Run smoke tests
- ✅ Verify deployment

**Timeline:** 5-10 minutes for complete deployment

**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 one:
   - **Upload:** Upload `swa-deploy.zip` (already created: 705KB)
   - **Connect to GitHub:** Connect repository for automatic deployments
   - **Local Git:** Use local Git deployment

**Alternative: SWA CLI (If Needed)**

```bash
# Get deployment token
DEPLOY_TOKEN=$(az staticwebapp secrets list \
  --name mim-prod-igiay4-web \
  --resource-group rg-miraclesinmotion-prod \
  --query "properties.apiKey" -o tsv)

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

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

---

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

**Current Status:** Function App is running but functions need to be registered.

**✅ RECOMMENDED: Use GitHub Actions (Automatic)**

The GitHub Actions workflow will automatically deploy functions when you push.

**Alternative: Manual Deployment**

```bash
# 1. Ensure API is built
cd api
npm run build
cd ..

# 2. Create deployment package (already created: api-func-deploy-proper.zip)
# Package includes: dist/, host.json, package.json

# 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 and verify
sleep 15
curl https://mim-prod-igiay4-func.azurewebsites.net/api/donations
curl https://mim-prod-igiay4-func.azurewebsites.net/api/health
```

**Functions Available:**
- `createDonation` - POST /api/donations
- `getDonations` - GET /api/donations

**Verify Functions:**
```bash
# Test endpoints
curl -X POST https://mim-prod-igiay4-func.azurewebsites.net/api/donations \
  -H "Content-Type: application/json" \
  -d '{"amount":100,"donorName":"Test","donorEmail":"test@example.com"}'

curl https://mim-prod-igiay4-func.azurewebsites.net/api/donations
```

---

## ✅ 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 ==="
HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" https://lemon-water-015cb3010.3.azurestaticapps.net)
echo "HTTP Status: $HTTP_CODE"
curl -s https://lemon-water-015cb3010.3.azurestaticapps.net | head -20

# 2. Function App - should respond
echo "=== Testing Function App ==="
HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" https://mim-prod-igiay4-func.azurewebsites.net)
echo "HTTP Status: $HTTP_CODE"
curl -s https://mim-prod-igiay4-func.azurewebsites.net | head -5

# 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 (not Azure default page)
- ✅ Function App responds (200 OK or function responses)
- ✅ API endpoints return JSON or proper responses
- ✅ No "service unavailable" errors
- ✅ No 404 errors for expected endpoints

---

## 🔧 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 \
  --query "properties"

# 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' || name=='COSMOS_DATABASE_NAME']"
```

**All settings should be configured:**
- ✅ AZURE_CLIENT_ID
- ✅ AZURE_TENANT_ID
- ✅ VITE_STRIPE_PUBLISHABLE_KEY (Key Vault reference)
- ✅ KEY_VAULT_URL
- ✅ APPINSIGHTS_INSTRUMENTATIONKEY
- ✅ STRIPE_SECRET_KEY (Key Vault reference)

---

## ☁️ Cloudflare Setup (Optional but Recommended)

### Step 5: Complete Cloudflare Configuration

**Prerequisites:**
Add to `.env.production`:
```
CLOUDFLARE_API_TOKEN=your-token-here
CLOUDFLARE_ZONE_ID=your-zone-id-here
```

**Run Automation:**
```bash
bash scripts/setup-cloudflare-auto.sh
```

**What it configures:**
- ✅ DNS records (www and apex domain)
- ✅ SSL/TLS (Full mode, Always HTTPS)
- ✅ Security settings (Medium level, Browser check)
- ✅ Performance (Minification, Brotli compression)
- ✅ Custom domain in Azure

---

## 🌐 Custom Domain (Optional)

### Step 6: Configure Custom Domain

**After Cloudflare or DNS is ready:**

```bash
# Add custom domain to Azure
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"
```

**Timeline:**
- DNS propagation: 5-30 minutes
- SSL certificate: 1-24 hours

---

## 📋 Complete Deployment Checklist

### Critical (Do First) ⚠️
- [ ] **Deploy Frontend** - Static Web App needs your React 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 Commands

### Complete Deployment (All-in-One)

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

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
echo "🌐 Deploying Static Web App..."
# RECOMMENDED: Push to GitHub
echo "Push to GitHub to trigger automatic deployment:"
echo "  git add ."
echo "  git commit -m 'Deploy to production'"
echo "  git push origin main"

# OR use Azure Portal → Deployment Center

# 4. Verify
echo "✅ Waiting for deployment..."
sleep 20
echo "Testing endpoints..."
curl -I https://lemon-water-015cb3010.3.azurestaticapps.net
curl -I https://mim-prod-igiay4-func.azurewebsites.net

echo "🎉 Deployment initiated!"
```

---

## 📊 Expected Results

### Before Deployment
- Static Web App: Azure default page
- Function App: Default page or "service unavailable"
- API Endpoints: 404 or unavailable

### After Deployment
- Static Web App: Your React application with Miracles in Motion
- Function App: Function responses or API endpoints
- API Endpoints: JSON responses from your functions

---

## 🎯 RECOMMENDED ACTION

**BEST APPROACH: Use GitHub Actions**

1. **Commit and push:**
   ```bash
   git add .
   git commit -m "Deploy to production - ensure all endpoints operational"
   git push origin main
   ```

2. **Monitor deployment:**
   - Go to: https://github.com/Miracles-In-Motion/public-web/actions
   - Watch the "Production Deployment" workflow
   - It will automatically:
     - Build frontend and API
     - Deploy to Static Web App
     - Deploy Function App functions
     - Run smoke tests

3. **Verify after deployment (wait 5-10 minutes):**
   ```bash
   # Test Static Web App
   curl -I https://lemon-water-015cb3010.3.azurestaticapps.net
   curl https://lemon-water-015cb3010.3.azurestaticapps.net | grep -i "miracles"

   # Test Function App
   curl -I https://mim-prod-igiay4-func.azurewebsites.net
   curl https://mim-prod-igiay4-func.azurewebsites.net/api/donations
   ```

---

## ✅ Success Criteria

**All endpoints are fully deployed and operational when:**

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

---

## 📚 Documentation Reference

- **Complete Next Steps:** `COMPLETE_NEXT_STEPS.md`
- **Deployment Next Steps:** `DEPLOYMENT_NEXT_STEPS.md`
- **Final Steps:** `FINAL_DEPLOYMENT_STEPS.md`
- **Deployment Status:** `DEPLOYMENT_STATUS.md`
- **GitHub Workflow:** `.github/workflows/production-deployment.yml`

---

## 🆘 Troubleshooting

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

### Function App Functions Not Working
- **Solution 1:** Verify functions are in the deployment package
- **Solution 2:** Check Function App logs in Azure Portal
- **Solution 3:** Restart Function App: `az functionapp restart`
- **Solution 4:** Verify app settings are correct

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

---

## 🎉 Summary

**Current Status:**
- ✅ Infrastructure: Complete and verified
- ✅ Configuration: Complete
- ⚠️ Applications: Need deployment

**Next Action:**
**🚀 RECOMMENDED: Push to GitHub to trigger automatic deployment**

```bash
git add .
git commit -m "Deploy to production - ensure all endpoints operational"
git push origin main
```

This will automatically deploy both the frontend and Function App functions, ensuring all endpoints are fully operational!

---

**📄 For detailed step-by-step instructions, see: `COMPLETE_NEXT_STEPS.md`**