Skip to content

Commit 2b63f07

Browse files
mbertelsenmbertelsen
committed
Fixes .env usage, local webhooks, adds measurement tiles
Ensures environment variables load properly via dotenv Automatically routes local webhook calls through Vite proxy Adds measurement-based UI tiles for stroke data Introduces scripts and documentation for Azure storage configuration
1 parent e296982 commit 2b63f07

20 files changed

+2257
-12
lines changed

‎FIXED_DOTENV_LOADING.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# ✅ Fixed: Server Now Loads .env File!
2+
3+
## What Was Wrong
4+
5+
The server wasn't loading environment variables from the `server/.env` file because:
6+
- ❌ `ts-node-dev` doesn't automatically load `.env` files
7+
- ❌ No `dotenv` package was installed
8+
- ❌ No code to load the `.env` file
9+
10+
Result: `AZURE_STORAGE_CONNECTION_STRING` was never read, even though it was in the file!
11+
12+
## What I Fixed
13+
14+
1. ✅ Added `dotenv` package to `server/package.json`
15+
2. ✅ Added code to load `.env` at server startup in `server/src/index.ts`
16+
3. ✅ Installed the package with `npm install`
17+
18+
## What You Need to Do Now
19+
20+
### Step 1: Restart the Server
21+
22+
In your server terminal (or start a new one):
23+
24+
```bash
25+
cd server
26+
npm run dev
27+
```
28+
29+
### Step 2: Look for the Success Message
30+
31+
You should now see:
32+
33+
```
34+
✅ Azure Table Storage connected: WebhookEvents
35+
```
36+
37+
Instead of:
38+
39+
```
40+
⚠️ AZURE_STORAGE_CONNECTION_STRING not set. Table Storage disabled.
41+
```
42+
43+
### Step 3: Test It
44+
45+
```powershell
46+
# Test the webhook endpoint
47+
curl http://localhost:4000/api/webhook/39a1ebb6-c429-4e01-b83d-8774a4573a1f/events
48+
```
49+
50+
Should return:
51+
52+
```json
53+
{
54+
"count": X,
55+
"events": [...],
56+
"source": "memory+storage",
57+
"storageEnabled": true ← This should be true now!
58+
}
59+
```
60+
61+
### Step 4: Test in Browser
62+
63+
1. Open http://localhost:5000
64+
2. Login and select a bay
65+
3. Go to **Webhook** tab
66+
4. **You should now see events from Azure Storage!** 🎉
67+
68+
## Quick Test Command
69+
70+
```powershell
71+
.\scripts\test-webhook-integration.ps1
72+
```
73+
74+
This time all tests should pass!
75+
76+
## Files Modified
77+
78+
1. ✅ `server/src/index.ts` - Added dotenv.config()
79+
2. ✅ `server/package.json` - Added dotenv dependency
80+
3. ✅ Ran `npm install` in server directory
81+
82+
## Why This Happened
83+
84+
You had **TWO `.env` files**:
85+
86+
1. **Root `.env`** - For frontend (Vite) - Uses `VITE_` prefix
87+
2. **`server/.env`** - For backend (Node.js) - Plain variable names
88+
89+
You correctly added the connection string to `server/.env`, but the server code wasn't configured to load it!
90+
91+
Now it is! 🚀

‎FIXED_WEBHOOK_SUMMARY.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
# ✅ Fixed: Webhook Tab Now Works Locally!
2+
3+
## What Was Wrong
4+
5+
Your localhost wasn't showing webhook events because:
6+
7+
1. ❌ Frontend was configured with `VITE_BACKEND_BASE_URL=https://dr-cloud-api-dev.trackmangolfdev.com`
8+
2. ❌ WebhookView component used this URL directly, bypassing the Vite proxy
9+
3. ❌ Requests went to cloud backend instead of your local server
10+
4. ❌ Local server (with Azure Storage connection) was being ignored
11+
12+
## What I Fixed
13+
14+
### ✅ Code Change: `src/components/WebhookView.tsx`
15+
16+
Added automatic localhost detection:
17+
18+
```typescript
19+
// Detect if running on localhost to use Vite proxy
20+
const isLocalhost = windowOrigin.includes('localhost') || windowOrigin.includes('127.0.0.1');
21+
const normalizedBase = isLocalhost ? '' : String(viteEnvBase || windowOrigin || '').replace(/\/$/, '');
22+
```
23+
24+
**How it works:**
25+
- **On localhost** (http://localhost:5000): Uses relative URLs → Goes through Vite proxy → Your local server
26+
- **On cloud** (https://...): Uses `VITE_BACKEND_BASE_URL` → Direct to cloud backend
27+
28+
### ✅ Now Your Setup Works Like This:
29+
30+
```
31+
┌──────────────────────────────────────────────────┐
32+
│ Frontend (localhost:5000) │
33+
│ ↓ │
34+
│ WebhookView detects localhost ✓ │
35+
│ ↓ │
36+
│ Uses relative URL: /api/webhook/... │
37+
│ ↓ │
38+
│ Vite Proxy (configured in vite.config.ts) │
39+
│ ↓ │
40+
│ Forwards to: localhost:4000/api/webhook/... │
41+
│ ↓ │
42+
│ Local Server (with Azure Storage connection) │
43+
│ ↓ │
44+
│ Reads from Azure Table Storage │
45+
│ ↓ │
46+
│ Returns ALL events (same as cloud!) ✅ │
47+
└──────────────────────────────────────────────────┘
48+
```
49+
50+
## How to Test
51+
52+
### Step 1: Restart Frontend (to pick up code changes)
53+
54+
```bash
55+
# Stop the current dev server (Ctrl+C)
56+
npm run dev
57+
```
58+
59+
### Step 2: Verify Configuration
60+
61+
```powershell
62+
.\scripts\test-webhook-integration.ps1
63+
```
64+
65+
This will check:
66+
- ✅ Local server running
67+
- ✅ Azure Storage connected
68+
- ✅ Vite proxy working
69+
- ✅ Events accessible
70+
71+
### Step 3: Test in Browser
72+
73+
1. Open http://localhost:5000 (or your port)
74+
2. Login
75+
3. Select a bay
76+
4. Go to **Webhook** tab
77+
5. **You should now see events!** 🎉
78+
79+
### Step 4: Verify Network Request
80+
81+
Open DevTools → Network tab:
82+
- ✅ Request should be: `http://localhost:5000/api/webhook/YOUR_PATH/events`
83+
- ✅ Should NOT be: `https://dr-cloud-api-dev.trackmangolfdev.com/...`
84+
85+
## What This Means
86+
87+
### ✅ Benefits
88+
89+
1. **Same data everywhere**: Local dev sees the same events as cloud
90+
2. **No config changes needed**: Works automatically when on localhost
91+
3. **No .env changes**: Can keep `VITE_BACKEND_BASE_URL` set to cloud
92+
4. **Team-friendly**: Other developers get the same experience
93+
5. **Deployment-ready**: Code works correctly in both environments
94+
95+
### 📊 Comparison
96+
97+
**Before (Not Working):**
98+
```
99+
localhost:5000 → cloud backend → cloud storage ❌
100+
```
101+
102+
**After (Working):**
103+
```
104+
localhost:5000 → proxy → localhost:4000 → Azure Storage ✅
105+
```
106+
107+
## Files Modified
108+
109+
1. ✅ `src/components/WebhookView.tsx` - Auto-detect localhost
110+
2. ✅ `server/.env` - Has Azure Storage connection string
111+
112+
## Files Created (Documentation)
113+
114+
1. 📄 `WEBHOOK_LOCAL_FIX.md` - Detailed explanation
115+
2. 📄 `scripts/test-webhook-integration.ps1` - Test script
116+
3. 📄 `FIXED_WEBHOOK_SUMMARY.md` - This file
117+
118+
## Troubleshooting
119+
120+
### Still Not Seeing Events?
121+
122+
**Check 1: Is server running?**
123+
```bash
124+
cd server
125+
npm run dev
126+
```
127+
128+
Look for:
129+
```
130+
✅ Azure Table Storage connected: WebhookEvents
131+
```
132+
133+
**Check 2: Is connection string configured?**
134+
```powershell
135+
.\scripts\verify-local-storage.ps1
136+
```
137+
138+
**Check 3: Are there events in storage?**
139+
The events must have been sent to your webhook URL in Azure. If you haven't set up the webhook subscription yet, there won't be any events to display.
140+
141+
**Check 4: Is frontend using proxy?**
142+
Open DevTools → Network tab → Look for `/api/webhook/` requests
143+
- Should go to `localhost:5000/api/...` (which proxies to `:4000`)
144+
- Should NOT go directly to `dr-cloud-api-dev.trackmangolfdev.com`
145+
146+
### How to Verify Proxy is Working
147+
148+
```bash
149+
# With server running on :4000 and frontend on :5000
150+
curl http://localhost:5000/api/webhook/YOUR_PATH/events
151+
```
152+
153+
Should return events from your local server.
154+
155+
## Next Steps
156+
157+
1. ✅ Code fix applied
158+
2. 🔄 Restart frontend (`npm run dev`)
159+
3. 🧪 Run test script (`.\scripts\test-webhook-integration.ps1`)
160+
4. 🌐 Open http://localhost:5000 → Webhook tab
161+
5. 🎉 See your events!
162+
163+
## Need More Help?
164+
165+
- 📖 Read: `WEBHOOK_LOCAL_FIX.md` for detailed options
166+
- 📖 Read: `LOCAL_AZURE_STORAGE_SETUP.md` for storage setup
167+
- 🧪 Run: `.\scripts\test-webhook-integration.ps1` for diagnostics
168+
- 🔍 Run: `.\scripts\verify-local-storage.ps1` for config check
169+
170+
---
171+
172+
**The fix is automatic!** Just restart your frontend and it should work. 🚀

0 commit comments

Comments
 (0)