# Upload to cPanel - Final Instructions

Your build is **PERFECT**! ✅ Now just upload it correctly.

---

## What You Have Ready

Location: `C:\Users\khawa\Herd\Aria-Herat-Mohandes-Zada-Construction\frontend\dist\spa`

Files to upload:
- ✅ index.html
- ✅ assets (folder)
- ✅ icons (folder)
- ✅ favicon.ico
- ✅ manifest.json

**DO NOT upload `spa.zip`** - that's just for convenience.

---

## cPanel Upload - Step by Step

### Step 1: Login to cPanel
- URL: Usually `https://herataria.nova.af:2083` or via your hosting panel
- Login with your cPanel username/password

### Step 2: Open File Manager
- Click **File Manager** icon
- A new window/tab will open

### Step 3: Navigate to Frontend Folder
1. In left sidebar, expand `public_html`
2. Click on `frontend` folder
3. You should now be in: `/home/username/public_html/frontend/`

### Step 4: Delete Old Files
1. Click the checkbox at the top (Select All)
2. Click **Delete** button in toolbar
3. Confirm deletion
4. The folder should now be **empty**

### Step 5: Upload Files

**Option A: Upload as ZIP (Recommended)**

1. On your computer:
   - Go to: `frontend\dist\spa\`
   - Select: index.html, assets, icons, favicon.ico, manifest.json
   - Right-click → Send to → Compressed (zipped) folder
   - Name it: `build.zip`

2. In cPanel File Manager:
   - Make sure you're in `public_html/frontend/`
   - Click **Upload** button (top toolbar)
   - Click **Select File**
   - Choose `build.zip`
   - Wait for 100% upload
   - Click **Close** when done

3. Extract:
   - Back in File Manager, you'll see `build.zip`
   - Right-click `build.zip` → **Extract**
   - Destination: `/public_html/frontend/` (should be default)
   - Click **Extract Files**
   - Click **Close** when done

4. Clean up:
   - Right-click `build.zip` → **Delete**
   - Confirm

**Option B: Upload Files Directly**

1. In cPanel File Manager (in `public_html/frontend/`):
   - Click **Upload** button
   - Select ALL files from `frontend\dist\spa\`:
     - index.html
     - favicon.ico
     - manifest.json
   - Upload them

2. Upload folders:
   - Click **Upload** again
   - Select the `assets` folder
   - Upload entire folder
   - Repeat for `icons` folder

### Step 6: Verify Upload

In File Manager, `public_html/frontend/` should show:

```
frontend/
├── assets/          (folder - contains many .js and .css files)
├── icons/           (folder - contains .png files)
├── favicon.ico      (file - 64 KB)
├── index.html       (file - 3 KB)
└── manifest.json    (file - 604 bytes)
```

**Should NOT contain:**
- ❌ dist folder
- ❌ spa folder
- ❌ src folder
- ❌ node_modules folder

---

## Test Your Site

### Test 1: Visit Frontend
Open browser: `https://herataria.nova.af/frontend/`

**Expected:** Login page with clean UI
**If not working:** See troubleshooting below

### Test 2: Check Console
1. Press F12 (open Developer Tools)
2. Go to Console tab
3. Refresh page
4. Look for errors

**Expected:** No major errors (maybe some warnings, that's ok)

### Test 3: Check Network
1. In Developer Tools, go to Network tab
2. Refresh page
3. Look at the requests

**Expected:** All files load (status 200)
**If 404 errors:** Files not uploaded correctly

### Test 4: Try Login
1. Username: `admin@ariaherat.af`
2. Password: `password`
3. Click Login

**Check Network tab:** Should see request to `/backend/public/api/login`

---

## Troubleshooting

### Problem: Still seeing template code `<% %>`

**Cause:** You uploaded source code instead of built files

**Solution:**
1. Delete everything in `public_html/frontend/`
2. Make sure you're uploading from `frontend\dist\spa\` (not from `frontend\src\`)
3. Upload again

---

### Problem: Blank white page

**Cause:** Files not in the right location or wrong paths

**Solution:**
1. Press F12, check Console for errors
2. Check Network tab for 404 errors
3. Verify file structure in cPanel matches exactly:
   ```
   public_html/frontend/index.html (directly here!)
   public_html/frontend/assets/
   ```

---

### Problem: Page shows but looks broken (no CSS)

**Cause:** Asset files didn't upload correctly

**Solution:**
1. Check `public_html/frontend/assets/` folder exists
2. Inside `assets/`, you should see many `.css` and `.js` files
3. Re-upload the `assets` folder

---

### Problem: 404 Not Found

**Cause:** Frontend folder doesn't exist or is in wrong location

**Solution:**
1. Verify folder structure:
   ```
   public_html/
   ├── frontend/
   │   └── index.html  (must be here!)
   └── backend/
   ```

2. If `frontend` folder doesn't exist, create it:
   - In File Manager, go to `public_html/`
   - Click **New Folder**
   - Name: `frontend`
   - Upload files there

---

### Problem: Can't login / API errors

**Cause:** Backend not configured or CORS issues

**Solution:**

1. **Check Backend:** Visit `https://herataria.nova.af/backend/public/api/auth`
   - Should return JSON (not HTML error page)

2. **Check CORS:** Edit `backend/config/cors.php`:
   ```php
   'allowed_origins' => [
       'https://herataria.nova.af',
       'https://www.herataria.nova.af',
   ],
   ```

3. **Clear Cache:** Run in SSH or Terminal:
   ```bash
   cd public_html/backend
   php artisan config:cache
   ```

---

## Backend Setup (If Not Done Yet)

If backend is giving errors, run these commands via SSH or cPanel Terminal:

```bash
# Navigate to backend
cd public_html/backend

# Install dependencies
composer install --optimize-autoloader --no-dev

# Set permissions
chmod -R 755 storage bootstrap/cache

# Run migrations
php artisan migrate --force

# Seed database (creates admin user)
php artisan db:seed --force

# Cache config
php artisan config:cache
php artisan route:cache
```

**Admin credentials:**
- Email: `admin@ariaherat.af`
- Password: `password`

---

## Alternative: Direct File Upload (No ZIP)

If ZIP upload/extract isn't working:

1. In File Manager, go to `public_html/frontend/`
2. Delete everything
3. On your computer, open `frontend\dist\spa\`
4. Drag and drop files directly into cPanel File Manager:
   - Drag `index.html`
   - Drag `favicon.ico`
   - Drag `manifest.json`
   - Drag `assets` folder
   - Drag `icons` folder
5. Wait for all uploads to complete

---

## Final Checklist

Before you say it's not working:

- [ ] Ran `npm run build` (NOT `npm run dev`)
- [ ] Build completed successfully
- [ ] Uploaded files from `frontend\dist\spa\` (correct location)
- [ ] `index.html` is directly in `public_html/frontend/`
- [ ] `assets` folder exists in `public_html/frontend/assets/`
- [ ] Visited `https://herataria.nova.af/frontend/` (with `/frontend/`)
- [ ] Checked browser console (F12) for specific errors
- [ ] Backend is running at `https://herataria.nova.af/backend/public/`
- [ ] Database is configured in backend `.env`

---

## What to Tell Me If Still Not Working

If it's still not working after following this guide, please tell me:

1. **What you see:** 
   - Exact error message
   - Screenshot if possible

2. **What URL you're visiting:**
   - `https://herataria.nova.af/` ?
   - `https://herataria.nova.af/frontend/` ?
   - Something else?

3. **Browser Console errors:**
   - Press F12
   - Go to Console tab
   - Copy any red errors

4. **File structure in cPanel:**
   - What folders/files you see in `public_html/frontend/`

5. **Backend status:**
   - What happens when you visit: `https://herataria.nova.af/backend/public/api/auth`

Then I can help you fix the specific issue!

---

## Success = This

When everything works, you should be able to:

1. ✅ Visit: `https://herataria.nova.af/frontend/#/login`
2. ✅ See: Clean login page with "Aria Herat ERP" branding
3. ✅ Login with: `admin@ariaherat.af` / `password`
4. ✅ See: Dashboard with sidebar, company switcher, etc.

That's the goal! 🎉