TurboTrades/FINAL_DEPLOY_STEPS.md

🚀 Final Deployment Steps - Steam Login & Navbar Fix

📋 What Was Fixed

1. WebSocket Auth Sync: WebSocket now triggers auth state refresh when connected
2. Axios Configuration: Fixed to use correct custom axios instance with proper baseURL
3. API URL Detection: Smart detection of API domain in production vs development

---

🎯 Deploy to Production Server

Step 1: SSH into Your Server

ssh your-user@your-server

Step 2: Navigate to Project & Pull Changes

cd /path/to/TurboTrades
git pull origin main

Step 3: Build Frontend

cd frontend
npm install  # only if package.json changed
npm run build

Expected output:

✓ 1588 modules transformed.
✓ built in 2.84s

Step 4: Deploy to Web Root

# Copy built files to your web server directory
sudo cp -r dist/* /var/www/html/turbotrades/

# Verify files were copied
ls -la /var/www/html/turbotrades/

Step 5: Set Yourself as Admin

# Go back to project root
cd /path/to/TurboTrades

# Run the make-admin script
node make-admin.js

Expected output:

✅ Connected to MongoDB
✅ Found user: ✅ Ashley アシュリー
   Current staff level: 0
✅ Successfully updated user to admin (staffLevel: 3)
🎉 Done! Please restart your backend server.

Step 6: Restart Backend (if needed)

pm2 restart turbotrades-backend

# Check logs
pm2 logs turbotrades-backend --lines 20

---

🧪 Test the Deployment

1. Clear Browser Cache

• Chrome/Edge: Ctrl + Shift + Delete → Clear all browsing data
• Firefox: Ctrl + Shift + Delete → Clear everything
• Or use Incognito/Private mode

2. Open Site & Console

1. Navigate to https://turbotrades.dev
2. Press F12 to open DevTools
3. Go to Console tab

3. Clear Site Data

In DevTools:

• Go to Application tab
• Click Clear storage
• Click Clear site data

4. Check API Base URL

In the console, you should see:

🔵 Production API baseURL: https://api.turbotrades.dev

This confirms it's using the correct API domain.

5. Test Login Flow

1. Click "Login to Steam" button
2. Complete Steam authentication
3. You'll be redirected back to the site

6. Watch Console Logs

You should see this sequence:

🔵 Auth store initialize called - isInitialized: false
🔵 fetchUser called - fetching user from /api/auth/me
✅ fetchUser response: { success: true, user: {...} }
✅ Setting user in auth store: { steamId: "...", username: "...", ... }
🔵 fetchUser complete - isAuthenticated: true

Connecting to WebSocket: wss://api.turbotrades.dev/ws
WebSocket connected
🟢 WebSocket received 'connected' message: { ... }
🔵 Calling authStore.fetchUser() from WebSocket connected handler
🔵 fetchUser called - fetching user from /api/auth/me
✅ fetchUser response: { success: true, user: {...} }
✅ Setting user in auth store: { ... }
🔵 fetchUser complete - isAuthenticated: true

7. Verify Navbar Updates

The navbar should now show:

• ✅ Your Steam avatar
• ✅ Your username
• ✅ Your balance with green deposit button
• ✅ User dropdown menu with Profile, Inventory, Transactions, Withdraw
• ✅ Admin option (with yellow background) since you're admin

8. Test User API Endpoints

Click on Profile and verify:

• User stats load correctly
• No console errors about /user/stats 404

9. Test Admin Access

Click on Admin in the dropdown menu:

• You should be able to access the admin dashboard
• No permission errors

---

✅ Success Criteria

• Site loads without errors
• Console shows: 🔵 Production API baseURL: https://api.turbotrades.dev
• Login button works
• After login, navbar shows logged-in state
• Avatar, username, and balance display correctly
• User dropdown menu works
• Profile page loads user stats
• Admin panel is accessible
• WebSocket connects successfully
• No 404 errors for /api/user/* routes

---

🐛 Troubleshooting

Navbar Not Updating After Login

Check console for errors:

# If you see wrong API URL:
🔵 Development API baseURL: /api

Solution: Hard refresh with Ctrl + Shift + R to clear cached JS

---

404 Errors on /api/user/stats

Check console:

Failed to fetch user stats: 404

Solution: This should be fixed now, but if you still see it:

1. Verify backend is running: pm2 status
2. Check backend logs: pm2 logs turbotrades-backend
3. Verify routes are registered: curl https://api.turbotrades.dev/api/health

---

WebSocket Not Connecting

Check console:

WebSocket error: ...

Solution:

# Check Nginx config
sudo cat /etc/nginx/sites-available/turbotrades-api | grep -A 5 "location /ws"

# Should have:
location /ws {
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass http://127.0.0.1:3000/ws;
}

# Reload Nginx if changed
sudo nginx -t
sudo systemctl reload nginx

---

Admin Panel Shows 403 Forbidden

Check if admin was set correctly:

# In your project directory
node -e "
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/turbotrades').then(async () => {
  const User = mongoose.model('User', new mongoose.Schema({steamId: String, username: String, staffLevel: Number}));
  const user = await User.findOne({steamId: '76561198027608071'});
  console.log('User:', user.username, 'Staff Level:', user.staffLevel);
  process.exit();
});
"

Should output:

User: ✅ Ashley アシュリー Staff Level: 3

If not 3, run node make-admin.js again.

---

📝 Files Changed

• frontend/src/stores/websocket.js - Added auth fetch on WebSocket connect
• frontend/src/stores/auth.js - Use custom axios instance, correct paths
• frontend/src/utils/axios.js - Smart API URL detection for production

---

🔄 Rollback (If Needed)

cd /path/to/TurboTrades

# Revert the last 3 commits
git revert HEAD~3..HEAD
git push origin main

# Rebuild and redeploy
cd frontend
npm run build
sudo cp -r dist/* /var/www/html/turbotrades/

---

🎉 You're Done!

After completing all steps:

1. ✅ Steam login works
2. ✅ Navbar updates after login
3. ✅ User API routes work
4. ✅ WebSocket connects and syncs auth
5. ✅ Admin panel is accessible

Enjoy your fully functional TurboTrades platform! 🚀