# Build and Deploy Instructions

## The Problem You're Facing

You're seeing `<% if (!ctx.mode.electron) { %><% } %>` because you uploaded **SOURCE CODE** instead of **BUILT FILES**.

You must:
1. ✅ Build the frontend locally with `npm run build`
2. ✅ Upload the **contents** of `frontend/dist/spa/`
3. ❌ DO NOT upload the `frontend/src/` folder to the server!

---

## Step-by-Step: Build Frontend Correctly

### 1. Configure Production API URL

**Option A: Use Environment Variable (Recommended)**

Create file: `frontend/.env.production`

```env
VITE_API_URL=http://herataria.nova.af/backend/public
```

**Option B: Edit axios.js directly**

Edit `frontend/src/boot/axios.js`, change line 8:

```javascript
// FROM:
'http://localhost:8000'

// TO:
'http://herataria.nova.af/backend/public'
```

### 2. Build the Frontend

```bash
cd frontend
npm install
npm run build
```

**Wait for build to complete!** You should see:
```
✓ built in 10-30 seconds
Build successful!
```

### 3. Verify Build Output

Check that these exist:
```
frontend/dist/spa/
├── index.html          ← Compiled HTML
├── css/                ← Compiled CSS
│   └── app.[hash].css
├── js/                 ← Compiled JavaScript
│   └── app.[hash].js
├── fonts/
└── icons/
```

**Open** `frontend/dist/spa/index.html` in a text editor:
- ✅ Should see normal HTML
- ❌ Should NOT see `<% %>` template code

### 4. Upload ONLY Built Files

⚠️ **CRITICAL**: Upload **ONLY** the contents of `frontend/dist/spa/`

**DO THIS:**
```
Go inside: frontend/dist/spa/
Select: index.html, css/, js/, fonts/, icons/, etc.
Upload to: public_html/frontend/
```

**NOT THIS:**
```
❌ Don't upload frontend/src/
❌ Don't upload frontend/node_modules/
❌ Don't upload the dist or spa folders themselves
```

---

## Quick Build Script (Windows)

Create file: `build-frontend.bat`

```batch
@echo off
echo Building Aria Herat ERP Frontend...
cd frontend
call npm run build
echo.
echo Build complete!
echo.
echo Now upload files from: frontend\dist\spa\
echo To server location: public_html/frontend/
pause
```

Run this before deploying!

---

## Quick Build Script (Linux/Mac)

Create file: `build-frontend.sh`

```bash
#!/bin/bash
echo "Building Aria Herat ERP Frontend..."
cd frontend
npm run build
echo ""
echo "Build complete!"
echo ""
echo "Now upload files from: frontend/dist/spa/"
echo "To server location: public_html/frontend/"
```

Make executable and run:
```bash
chmod +x build-frontend.sh
./build-frontend.sh
```

---

## Current Deployment Structure

Based on your URL `herataria.nova.af/frontend`, your structure should be:

```
public_html/
├── frontend/               ← Upload built files here
│   ├── index.html         ← From dist/spa/
│   ├── css/               ← From dist/spa/
│   ├── js/                ← From dist/spa/
│   ├── fonts/
│   └── icons/
│
└── backend/               ← Laravel backend
    ├── public/
    │   └── index.php
    ├── app/
    └── ...
```

---

## Checklist: Verify Your Upload

After uploading, check these files exist on server:

- [ ] `public_html/frontend/index.html` (compiled, no `<% %>` code)
- [ ] `public_html/frontend/css/` folder exists
- [ ] `public_html/frontend/js/` folder exists
- [ ] Inside `css/` folder: files like `app.abc123.css`
- [ ] Inside `js/` folder: files like `app.abc123.js`

**If you see:**
- ❌ `public_html/frontend/src/` → You uploaded source code!
- ❌ `public_html/frontend/node_modules/` → You uploaded source code!
- ❌ Template code like `<% %>` → You uploaded source code!

**Delete everything and upload again from `dist/spa/`!**

---

## Test Your Deployment

1. **Visit**: `http://herataria.nova.af/frontend/`
   - Should show login page
   - No template code visible

2. **Open Browser Console** (F12):
   - Check for JavaScript errors
   - Look at Network tab for API calls

3. **Check API Connection**:
   - Try to login
   - Network tab should show calls to: `http://herataria.nova.af/backend/public/api/`

---

## Common Mistakes

### ❌ Mistake 1: Uploading Source Code
**Problem**: Upload `frontend/src/` folder
**Solution**: Delete it! Upload only `frontend/dist/spa/` contents

### ❌ Mistake 2: Not Building First
**Problem**: Upload without running `npm run build`
**Solution**: Always build first!

### ❌ Mistake 3: Uploading Folders Instead of Contents
**Problem**: Upload `dist` folder
**Result**: URL becomes `herataria.nova.af/frontend/dist/spa/`
**Solution**: Upload contents of `spa/` directly to `frontend/`

### ❌ Mistake 4: Wrong API URL
**Problem**: API calls go to `localhost:8000`
**Solution**: Set `VITE_API_URL` before building

---

## Environment Variables Explained

Quasar uses Vite, which reads `.env` files:

- `.env` → Default values (all environments)
- `.env.production` → Production only (when running `npm run build`)
- `.env.development` → Development only (when running `npm run dev`)

**Your axios.js reads**:
```javascript
import.meta.env.VITE_API_URL || 'http://localhost:8000'
```

So create `.env.production`:
```
VITE_API_URL=http://herataria.nova.af/backend/public
```

Now when you run `npm run build`, it will use that URL!

---

## Summary: Correct Process

1. ✅ Edit `frontend/.env.production` → set your API URL
2. ✅ Run `npm run build` in frontend folder
3. ✅ Wait for build to complete
4. ✅ Go inside `frontend/dist/spa/`
5. ✅ Select ALL files (index.html, css/, js/, etc.)
6. ✅ Upload to `public_html/frontend/`
7. ✅ Test: `http://herataria.nova.af/frontend/`

**Never upload**:
- ❌ `frontend/src/`
- ❌ `frontend/node_modules/`
- ❌ `frontend/.quasar/`
- ❌ The `dist/` or `spa/` folder names themselves