164 lines
4.9 KiB
Markdown
164 lines
4.9 KiB
Markdown
# KHY Admin Workflow Guide
|
|
|
|
## Overview
|
|
|
|
This admin dashboard provides a **preview/staging environment** where you can make changes, see exactly how they'll look on the website, and then deploy to production with confidence.
|
|
|
|
## Complete Workflow
|
|
|
|
### 1. 🎯 **Make Changes**
|
|
|
|
- Open `admin.html` in your browser
|
|
- Add, edit, or delete products using the form interface
|
|
- Use "Preview Product" to see how individual products will look
|
|
|
|
### 2. 👀 **Preview Changes**
|
|
|
|
#### Option A: Auto-Start Preview (Recommended)
|
|
|
|
```bash
|
|
# One command to start server and open all preview pages
|
|
npm run preview
|
|
|
|
# Server will automatically stop when:
|
|
# - All preview tabs are closed
|
|
# - Deploy command is run
|
|
# - Manual stop: npm run preview:kill
|
|
```
|
|
|
|
#### Option B: Manual Preview
|
|
|
|
- Click "👀 Preview Website" button in admin dashboard
|
|
- Or manually open `index.html`, `product-catalog.html`, `product-detail.html`
|
|
- Navigate through the site to ensure everything looks correct
|
|
|
|
### 3. ✅ **Confirm Changes**
|
|
|
|
- Review all changes thoroughly
|
|
- Test product links and functionality
|
|
- Ensure images load correctly
|
|
|
|
### 4. 🚀 **Deploy to Production**
|
|
|
|
The deploy process copies updated files from the **admin directory** to the **main KHY website directory**.
|
|
|
|
#### Option A: Automated Deploy (Recommended)
|
|
|
|
```bash
|
|
# Navigate to admin directory
|
|
cd admin
|
|
|
|
# Copy updated files to main website
|
|
npm run deploy
|
|
```
|
|
|
|
**What this does:**
|
|
|
|
- Copies `admin/data/products.json` → `../data/products.json` (main website)
|
|
- Copies `admin/assets/images/` → `../assets/images/` (main website)
|
|
- Creates backup of current main website files
|
|
- Updates the live KHY website immediately
|
|
|
|
#### Option B: Manual Deploy
|
|
|
|
1. Click "Download products.json" in the admin dashboard
|
|
2. Manually copy the downloaded file to `../data/products.json`
|
|
3. Manually copy any new images from `admin/assets/images/` to `../assets/images/`
|
|
|
|
## File Structure
|
|
|
|
```
|
|
admin/ # Admin/Staging Environment
|
|
├── admin.html # Admin dashboard
|
|
├── index.html # Homepage preview
|
|
├── product-catalog.html # Catalog preview
|
|
├── product-detail.html # Product detail preview
|
|
├── data/products.json # Staging product data
|
|
├── assets/images/ # Staging images
|
|
├── deploy.js # Deploy script
|
|
└── package.json # NPM scripts
|
|
|
|
../ # Main Website (Production)
|
|
├── index.html # Live homepage
|
|
├── product-catalog.html # Live catalog
|
|
├── product-detail.html # Live product details
|
|
├── data/products.json # Live product data
|
|
└── assets/images/ # Live images
|
|
```
|
|
|
|
## Key Benefits
|
|
|
|
✅ **Safe Testing**: Make changes without affecting the live site
|
|
✅ **Visual Preview**: See exactly how changes will look
|
|
✅ **Easy Deployment**: One-click deploy to production
|
|
✅ **Backup System**: Automatic backups before deployment
|
|
✅ **No Technical Knowledge**: Simple interface for non-technical users
|
|
|
|
## Deployment Process
|
|
|
|
### What Happens During Deploy:
|
|
|
|
1. **Stop Preview Server**: Automatically stops the preview server (if running)
|
|
2. **Validation**: Checks that main KHY website directory exists and has required files
|
|
3. **Backup**: Creates timestamped backup of current main website data
|
|
4. **Copy Files**:
|
|
- Copies `admin/data/products.json` → `../data/products.json` (main website)
|
|
- Copies `admin/assets/images/` → `../assets/images/` (main website)
|
|
5. **Verification**: Confirms all files were copied successfully
|
|
6. **Completion**: Main KHY website is updated immediately with new product data
|
|
|
|
### Backup System:
|
|
|
|
- All deployments create automatic backups in `admin/backups/`
|
|
- Backups are timestamped for easy identification
|
|
- Can restore from backup if needed
|
|
|
|
## Troubleshooting
|
|
|
|
### Deploy Fails?
|
|
|
|
- Check that you're in the admin directory
|
|
- Verify the main website directory exists
|
|
- Ensure you have write permissions
|
|
|
|
### Changes Not Showing?
|
|
|
|
- Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
|
|
- Check that the correct `products.json` file was updated
|
|
- Verify image paths are correct
|
|
|
|
### Need to Restore?
|
|
|
|
- Find the backup in `admin/backups/`
|
|
- Copy the backup `products.json` to the main website
|
|
- Or run the deploy script again
|
|
|
|
## Best Practices
|
|
|
|
1. **Always Preview**: Use the preview pages before deploying
|
|
2. **Test Everything**: Check all product links and images
|
|
3. **Deploy Regularly**: Don't let changes pile up
|
|
4. **Keep Backups**: The system creates them automatically
|
|
5. **Document Changes**: Keep notes of what you changed and why
|
|
|
|
## Quick Commands
|
|
|
|
```bash
|
|
# Start preview server
|
|
npm start
|
|
|
|
# Deploy to production
|
|
npm run deploy
|
|
|
|
# View help
|
|
npm run preview
|
|
```
|
|
|
|
## Support
|
|
|
|
If you encounter any issues:
|
|
|
|
1. Check the browser console for errors
|
|
2. Verify file permissions
|
|
3. Ensure all required files exist
|
|
4. Contact your development team for assistance
|