SkyArtShop/docs/DEVELOPMENT_MODE.md

Development Mode - Localhost:5000 Setup

✅ Current Setup

What Changed

• Nginx: Stopped and disabled
• Backend: Now serves files from development directory
• Port: Website runs on http://localhost:5000
• Auto-reload: PM2 watch mode enabled for instant changes

File Locations

• Development files: /media/pts/Website/SkyArtShop/website/
  • Public pages: website/public/
  • Admin panel: website/admin/
  • Assets: website/assets/
  • Uploads: website/uploads/

How It Works

// Backend automatically serves from development directory
const baseDir = path.join(__dirname, "..", "website");
app.use(express.static(path.join(baseDir, "public")));
app.use("/admin", express.static(path.join(baseDir, "admin")));

🚀 Access Your Site

URLs

• Homepage: http://localhost:5000/
• Admin Login: http://localhost:5000/admin/login.html
• Admin Dashboard: http://localhost:5000/admin/dashboard.html
• Any page: http://localhost:5000/[page-name].html

API Endpoints

• Admin API: http://localhost:5000/api/admin/*
• Public API: http://localhost:5000/api/*
• Health Check: http://localhost:5000/health

🔄 Instant Reflection of Changes

PM2 Watch Mode Enabled

PM2 is watching for changes and will auto-restart the backend when:

• Backend files change (routes, server.js, etc.)
• Configuration changes

Frontend Changes (HTML/CSS/JS)

Frontend files are served directly from /media/pts/Website/SkyArtShop/website/

• Just refresh your browser (F5 or Ctrl+R)
• Changes show immediately - no deployment needed!
• No need to restart anything

Backend Changes

• PM2 watch mode automatically restarts the server
• Changes apply within 1-2 seconds

📝 Development Workflow

Making Changes

1. Edit any file in /media/pts/Website/SkyArtShop/website/

   # Example: Edit homepage
   nano /media/pts/Website/SkyArtShop/website/public/home.html
   
   # Example: Edit admin dashboard
   nano /media/pts/Website/SkyArtShop/website/admin/dashboard.html
   

2. Refresh browser - Changes show immediately!

3. No deployment needed - You're working directly with source files

Checking Status

# Check if backend is running
pm2 status

# View logs
pm2 logs skyartshop

# Restart manually if needed
pm2 restart skyartshop

🛠️ Useful Commands

Backend Management

# View PM2 status
pm2 status

# View real-time logs
pm2 logs skyartshop --lines 50

# Restart backend
pm2 restart skyartshop

# Stop backend
pm2 stop skyartshop

# Start backend
pm2 start skyartshop

Test Endpoints

# Test homepage
curl http://localhost:5000/

# Test admin login
curl http://localhost:5000/admin/login.html

# Test API
curl http://localhost:5000/api/products

# Test health
curl http://localhost:5000/health

🌐 When Ready to Push Live

Re-enable Nginx for Production

# 1. Deploy files to production
sudo ./deploy-website.sh

# 2. Update backend to production mode
# Edit backend/server.js: Set NODE_ENV=production

# 3. Restart backend
pm2 restart skyartshop

# 4. Enable and start nginx
sudo systemctl enable nginx
sudo systemctl start nginx

Or Use Deployment Script

# Deploy everything at once
sudo ./deploy-website.sh

📊 Current Configuration

Backend (server.js)

• Environment: Development (auto-detected)
• Port: 5000
• Static Files: /media/pts/Website/SkyArtShop/website/
• Watch Mode: Enabled
• Session Cookie: secure=false (for HTTP)

Nginx

• Status: Stopped and disabled
• Will be re-enabled: When pushing to production

Database

• PostgreSQL: Still connected and working
• Session Store: Active
• All data preserved: No changes to database

✨ Benefits

✅ No deployment needed - Work directly with source files ✅ Instant changes - Just refresh browser ✅ Auto-restart - PM2 watches for backend changes ✅ No HTTPS complexity - Simple HTTP development ✅ Database intact - All your data is safe ✅ Easy testing - One URL: localhost:5000

🎯 Summary

Before:

• Nginx on port 80/443 → Served from /var/www/skyartshop/
• Had to deploy every change
• Two different sites (localhost vs domain)

Now:

• Backend on port 5000 → Serves from /media/pts/Website/SkyArtShop/website/
• Edit files directly, refresh browser
• One development site on localhost:5000
• Ready to push to production when done

---

Access your site now at: http://localhost:5000 🚀