miracles_in_motion/docs/deployment/DEPLOYMENT_COMPLETE_GUIDE.md

# 🎯 Complete Deployment Guide - All Next Steps

**Date:** November 12, 2025  
**Status:** Infrastructure complete, applications ready for deployment

---

## ✅ Current Status

### Infrastructure: COMPLETE ✅
- All 9 Azure resources deployed and verified
- Static Web App: Created (Standard SKU) - https://lemon-water-015cb3010.3.azurestaticapps.net
- Function App: Created and running - https://mim-prod-igiay4-func.azurewebsites.net
- Key Vault: Configured with 6 secrets
- Azure AD: App registration configured
- Application Insights: Connected
- Monitoring: Alerts configured

### Applications: READY FOR DEPLOYMENT ⚠️
- **Frontend:** Built successfully (298KB gzipped)
- **API:** Built successfully (TypeScript compiled)
- **Deployment Packages:** Created and ready
  - `swa-deploy.zip` (705KB) - Frontend
  - `api-func-deploy-proper.zip` (9.2KB) - Functions

---

## 🚀 CRITICAL: Deploy Applications

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

**Current:** Static Web App shows Azure default page  
**Target:** Your React application should be visible

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

You have a production deployment workflow (`.github/workflows/production-deployment.yml`) that will automatically deploy everything:

```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 happens automatically:**
- ✅ Builds frontend application
- ✅ Builds API
- ✅ Deploys to Static Web App
- ✅ Deploys Function App functions
- ✅ Runs smoke tests
- ✅ Verifies deployment

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

**Alternative: Azure Portal**

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** → Upload `swa-deploy.zip` (705KB, already created)
5. Wait for deployment to complete

**Alternative: SWA CLI**

```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, 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:** Function App is running but functions need deployment  
**Target:** Functions should respond at `/api/donations`

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

The workflow will automatically deploy functions when you push.

**Alternative: Manual Deployment**

```bash
# Deploy using the proper package (already created)
az functionapp deployment source config-zip \
  --resource-group rg-miraclesinmotion-prod \
  --name mim-prod-igiay4-func \
  --src api-func-deploy-proper.zip

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

# Wait and test
sleep 15
curl https://mim-prod-igiay4-func.azurewebsites.net/api/donations
```

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

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

# POST donation
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"}'
```

---

## ✅ Verification Steps

### Step 3: Verify All Endpoints

**Comprehensive Testing:**

```bash
# 1. Static Web 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
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
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 shows your React application
- ✅ Function App responds correctly
- ✅ API endpoints return JSON
- ✅ No errors or unavailable messages

---

## ☁️ Cloudflare Setup

### Step 4: 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 (www and apex)
- SSL/TLS (Full mode, Always HTTPS)
- Security settings
- Performance optimizations

---

## 🌐 Custom Domain

### Step 5: Configure Custom Domain

**After 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 Checklist

### Critical (Do First)
- [ ] **Deploy Frontend** - Push to GitHub or use Azure Portal
- [ ] **Deploy Functions** - Will deploy automatically with GitHub Actions
- [ ] **Verify Endpoints** - Test all URLs
- [ ] **Test Functionality** - Verify API works

### Important (Do Next)
- [ ] **Complete Cloudflare** - Add credentials and run automation
- [ ] **Configure Custom Domain** - Set up DNS
- [ ] **Final Testing** - Comprehensive verification

### Optional (Later)
- [ ] **Performance Optimization**
- [ ] **Additional Monitoring**

---

## 🎯 RECOMMENDED ACTION

**BEST: Push to GitHub**

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

This triggers automatic deployment of both frontend and functions!

---

## 📊 Expected Results

| Component | Current | After Deployment |
|-----------|---------|------------------|
| Static Web App | Azure default page | Your React app |
| Function App | Default page | Function responses |
| API Endpoints | 404/Unavailable | JSON responses |

---

## ✅ Success Criteria

- [x] Infrastructure deployed ✅
- [ ] Static Web App shows your application ⚠️
- [ ] Function App functions deployed ⚠️
- [ ] All endpoints operational ⚠️
- [x] Configuration complete ✅
- [x] Monitoring active ✅

---

**🚀 RECOMMENDED: Push to GitHub to trigger automatic deployment!**

**📄 For detailed instructions, see: `ALL_NEXT_STEPS.md`**