# Deploy Right Now - Step by Step ## Current Status ✅ Backend is uploaded and working at: `https://herataria.nova.af/backend/public/` ✅ Database is configured ⚠️ Frontend needs to be rebuilt and uploaded correctly --- ## STEP 1: Build Frontend (On Your Computer) Open terminal/command prompt: ```bash cd frontend npm run build ``` ⚠️ **NOT `npm run dev`!** That's for local development only! Wait for the build to finish. You should see: ``` ✓ built in XX seconds ``` --- ## STEP 2: Verify Build Output Check that this folder exists and has files: ``` frontend/dist/spa/ ├── index.html ← Should be normal HTML ├── css/ │ └── app.xxxxx.css ├── js/ │ └── app.xxxxx.js ├── fonts/ └── icons/ ``` Open `frontend/dist/spa/index.html` in Notepad: - ✅ Should look like normal HTML with ``, ``, `` - ❌ Should NOT have `<% %>` template code --- ## STEP 3: Delete Old Frontend Files on Server In cPanel File Manager: 1. Go to `public_html/frontend/` 2. **Select ALL files and folders** 3. **Delete everything** 4. Confirm deletion Your `public_html/frontend/` should now be **empty**. --- ## STEP 4: Upload New Frontend Files ### Method A: ZIP Upload (Recommended) 1. **On your computer**, open `frontend/dist/spa/` folder 2. **Select ALL files inside** (Ctrl+A): - index.html - css folder - js folder - fonts folder - icons folder - etc. 3. **Right-click → Compress to ZIP** → name it `frontend.zip` 4. **Upload `frontend.zip`** to `public_html/frontend/` 5. **In cPanel**, right-click `frontend.zip` → Extract 6. **Delete** `frontend.zip` ### Method B: FTP Upload 1. Connect to your server via FTP 2. Navigate to `public_html/frontend/` 3. On your computer, open `frontend/dist/spa/` 4. Select ALL files inside 5. Drag and drop to server --- ## STEP 5: Verify Upload Check `public_html/frontend/` has: - ✅ index.html (file) - ✅ css (folder) - ✅ js (folder) - ✅ fonts (folder) - ✅ icons (folder) **Should NOT have:** - ❌ src folder - ❌ node_modules folder - ❌ dist folder - ❌ spa folder --- ## STEP 6: Test Your Deployment ### Test Frontend: Visit: `https://herataria.nova.af/frontend/` Expected result: - ✅ Login page loads - ✅ No template code visible - ✅ Page looks correct ### Test Backend API: Visit: `https://herataria.nova.af/backend/public/api/auth` Expected result: - ✅ JSON response (even if error, should be JSON) ### Test Frontend → Backend Connection: 1. Open: `https://herataria.nova.af/frontend/#/login` 2. Open Browser Console (F12) 3. Try to login with any credentials 4. Check Network tab: - Should see request to: `https://herataria.nova.af/backend/public/api/login` - Should get a response (even if login fails, should get JSON) --- ## STEP 7: Fix .htaccess (Optional - for cleaner URLs) If you want `https://herataria.nova.af/` to redirect to frontend: Create `public_html/.htaccess`: ```apache RewriteEngine On RewriteBase / # Redirect root to frontend RewriteRule ^$ /frontend/ [L,R=301] # Handle frontend SPA routing RewriteCond %{REQUEST_URI} ^/frontend/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^frontend/(.*)$ /frontend/index.html [L] ``` --- ## Backend .env Configuration Your backend .env looks good! Just verify these lines: ```env APP_URL=https://herataria.nova.af/backend/public FRONTEND_URL=https://herataria.nova.af/frontend DB_CONNECTION=mysql DB_HOST=localhost DB_DATABASE=sahelshi_herataria DB_USERNAME=sahelshi_herataria DB_PASSWORD=P@$$W)RD@123 SESSION_DOMAIN=.herataria.nova.af SANCTUM_STATEFUL_DOMAINS=herataria.nova.af,www.herataria.nova.af ``` ⚠️ **Remove this line from backend .env** (it's only for frontend): ``` VITE_API_URL=http://herataria.nova.af/backend/public ``` After removing, run in SSH/Terminal: ```bash cd public_html/backend php artisan config:cache ``` --- ## Understanding the 405 Error The 405 error at `https://herataria.nova.af/backend/public/` is **NORMAL**. Why? Because: - `/backend/public/` expects a GET request - Laravel's default route is POST only or doesn't exist at root - Your API routes are at `/backend/public/api/*` **This is working correctly!** Test the actual API endpoint: ``` https://herataria.nova.af/backend/public/api/auth ``` This should return JSON. --- ## Final Structure Your server should look like: ``` public_html/ ├── .htaccess (optional - for redirects) ├── frontend/ ← Frontend files │ ├── index.html │ ├── css/ │ ├── js/ │ └── ... │ └── backend/ ← Laravel backend ├── app/ ├── config/ ├── database/ ├── public/ │ └── index.php ├── .env └── ... ``` --- ## Quick Checklist Before you say "it's done": - [ ] Ran `npm run build` (NOT `npm run dev`) - [ ] Uploaded contents of `dist/spa/` to `public_html/frontend/` - [ ] Deleted old files from `public_html/frontend/` first - [ ] `index.html` is directly in `public_html/frontend/` - [ ] No `<% %>` template code visible on website - [ ] Removed `VITE_API_URL` from backend `.env` - [ ] Can visit `https://herataria.nova.af/frontend/` and see login page - [ ] Browser console shows no major errors - [ ] API calls go to correct URL in Network tab --- ## If Still Having Issues **Problem**: Template code `<% %>` still shows **Solution**: You uploaded source files, not built files. Delete everything and upload from `dist/spa/` again. **Problem**: Blank page **Solution**: Check browser console (F12) for errors. Check if files uploaded correctly. **Problem**: API not connecting **Solution**: Check Network tab in browser console. Verify API URL is correct. **Problem**: CORS errors **Solution**: Update `backend/config/cors.php` with your domain and run `php artisan config:cache` --- ## Commands to Run on Server (If you have SSH) ```bash # Navigate to backend cd public_html/backend # Clear all caches php artisan cache:clear php artisan config:clear php artisan route:clear php artisan view:clear # Rebuild caches php artisan config:cache php artisan route:cache php artisan view:cache # Fix permissions chmod -R 755 storage bootstrap/cache # Run migrations (if needed) php artisan migrate --force ``` --- ## Success Criteria ✅ Visit `https://herataria.nova.af/frontend/#/login` ✅ See clean login page (no template code) ✅ Can type username/password ✅ Click login button ✅ Network tab shows API call to backend ✅ Get JSON response from backend That's it! You're deployed! 🎉