This commit is contained in:
288
FINAL_DEPLOY_STEPS.md
Normal file
288
FINAL_DEPLOY_STEPS.md
Normal file
@@ -0,0 +1,288 @@
|
||||
# 🚀 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
|
||||
|
||||
```bash
|
||||
ssh your-user@your-server
|
||||
```
|
||||
|
||||
### Step 2: Navigate to Project & Pull Changes
|
||||
|
||||
```bash
|
||||
cd /path/to/TurboTrades
|
||||
git pull origin main
|
||||
```
|
||||
|
||||
### Step 3: Build Frontend
|
||||
|
||||
```bash
|
||||
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
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
# 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)
|
||||
|
||||
```bash
|
||||
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:**
|
||||
```bash
|
||||
# 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:**
|
||||
```bash
|
||||
# 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)
|
||||
|
||||
```bash
|
||||
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!** 🚀
|
||||
@@ -37,8 +37,16 @@ const getApiBaseUrl = () => {
|
||||
};
|
||||
|
||||
// Create axios instance
|
||||
const baseURL = getApiBaseUrl();
|
||||
console.log("🔧 Creating axios instance with baseURL:", baseURL);
|
||||
console.log(
|
||||
"🔧 Environment:",
|
||||
import.meta.env.PROD ? "PRODUCTION" : "DEVELOPMENT"
|
||||
);
|
||||
console.log("🔧 Current hostname:", window.location.hostname);
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: getApiBaseUrl(),
|
||||
baseURL: baseURL,
|
||||
timeout: 15000,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
@@ -46,17 +54,22 @@ const axiosInstance = axios.create({
|
||||
},
|
||||
});
|
||||
|
||||
console.log("✅ Axios instance created with config:", {
|
||||
baseURL: axiosInstance.defaults.baseURL,
|
||||
withCredentials: axiosInstance.defaults.withCredentials,
|
||||
timeout: axiosInstance.defaults.timeout,
|
||||
});
|
||||
|
||||
// Request interceptor
|
||||
axiosInstance.interceptors.request.use(
|
||||
(config) => {
|
||||
// You can add auth token to headers here if needed
|
||||
// const token = localStorage.getItem('token')
|
||||
// if (token) {
|
||||
// config.headers.Authorization = `Bearer ${token}`
|
||||
// }
|
||||
// Log every request for debugging
|
||||
const fullUrl = `${config.baseURL}${config.url}`;
|
||||
console.log(`📤 Axios Request: ${config.method.toUpperCase()} ${fullUrl}`);
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
console.error("❌ Axios Request Error:", error);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user