# 🚀 CPANEL DEPLOYMENT GUIDE — tatuaje.ro

## How to deploy your Next.js website on cPanel alongside WordPress

This guide shows you how to install your Next.js tattoo & piercing website on cPanel using the "Setup Node.js App" feature, running it **alongside your existing WordPress site**.

---

## 📋 BEFORE YOU START

You need:
- ✅ cPanel access at tatuaje.ro/cpanel
- ✅ The "Setup Node.js App" icon available in cPanel (Software section)
- ✅ The file `tatuaje-ro-cpanel.zip` (downloaded from this project)
- ✅ Your existing WordPress site (stays untouched)

**Important:** Your Next.js site will run on a **subdomain** (e.g., `new.tatuaje.ro`) or **subfolder** (e.g., `tatuaje.ro/site`). Your WordPress stays at `tatuaje.ro`. Later, when you're happy with the new site, you can swap them.

---

## STEP 1: Create a Subdomain (recommended, 2 minutes)

Running Next.js on a subdomain is the cleanest approach — zero conflicts with WordPress.

1. Log in to **cPanel** at `https://tatuaje.ro/cpanel`
2. Find the **Domains** section → click **Subdomains**
3. Create a subdomain:
   - **Subdomain:** `new` (creates `new.tatuaje.ro`)
   - **Document Root:** `new_tatuaje_ro` (cPanel auto-fills this)
   - Click **Create**
4. You now have a new folder at `/home/USERNAME/new_tatuaje_ro/`

> **Alternative:** If you want the Next.js site in a subfolder instead (e.g., `tatuaje.ro/site`), skip this step. The app URL in Step 4 will be `tatuaje.ro/site`.

---

## STEP 2: Upload the ZIP file (3 minutes)

### Via cPanel File Manager (easiest)

1. In cPanel, click **File Manager** (Files section)
2. Navigate to the folder you just created: `new_tatuaje_ro`
3. Click **Upload** (top right)
4. Upload the file `tatuaje-ro-cpanel.zip`
5. Once uploaded, right-click the ZIP → **Extract**
6. You'll get a folder called `standalone` — **open it**
7. Select ALL files inside `standalone` (Ctrl+A or Cmd+A)
8. Click **Move** → move them to the `new_tatuaje_ro` folder (the parent)
9. Delete the now-empty `standalone` folder and the ZIP file
10. Your `new_tatuaje_ro` folder should now contain:
    ```
    new_tatuaje_ro/
    ├── .next/
    ├── node_modules/
    ├── public/
    ├── app.js
    ├── package.json
    └── server.js
    ```

### Via FTP (if File Manager upload limit is too low)

1. Download FileZilla (https://filezilla-project.org)
2. Connect with:
   - Host: `ftp.tatuaje.ro`
   - Username: your cPanel username
   - Password: your cPanel password
   - Port: 21
3. Navigate to `/new_tatuaje_ro/`
4. Upload the contents of the ZIP (extract locally first, then upload all files)

---

## STEP 3: Set up the Node.js App in cPanel (3 minutes)

1. In cPanel, go to the **Software** section → click **Setup Node.js App**

2. Click **Create Application**

3. Fill in the form:
   - **Node.js version:** `16.x` or `18.x` or `20.x` (pick the highest available)
   - **Application mode:** `Production`
   - **Application root:** `new_tatuaje_ro` (the folder from Step 1)
   - **Application URL:** select `new.tatuaje.ro` from the dropdown
   - **Application startup file:** `app.js`
   - **Passenger log file:** leave default

4. Click **Create**

5. cPanel shows you a command to install dependencies. **Skip that** — the node_modules are already included in the ZIP.

---

## STEP 4: Add Environment Variables (1 minute)

1. In the Node.js app settings (same page), find the **Environment variables** section
2. Click **Add**
3. Add these variables:

| Variable | Value |
|----------|-------|
| `NODE_ENV` | `production` |
| `NEXT_PUBLIC_SITE_URL` | `https://new.tatuaje.ro` |
| `PORT` | `3000` |

4. Click **Save**

---

## STEP 5: Start the App (30 seconds)

1. At the top of the Node.js app page, click **Run NPM Install** (optional — deps are already there, but harmless)
2. Click **Restart** (the blue button with a circular arrow)
3. Wait 5-10 seconds for the app to start
4. Click the **Open** link (next to the Application URL) — your site opens in a new tab! 🎉

You should see your tattoo & piercing website live at `https://new.tatuaje.ro`

---

## STEP 6: Enable SSL (2 minutes)

1. In cPanel, go to **Security** → **SSL/TLS Status**
2. Find `new.tatuaje.ro` → click **Run AutoSSL**
3. Wait 1-2 minutes for the free SSL certificate to install
4. Your site is now accessible at `https://new.tatuaje.ro` (secure)

---

## STEP 7: Test Everything (2 minutes)

Visit `https://new.tatuaje.ro` and check:
- [ ] Homepage loads with parallax effects
- [ ] Language switcher works (RO ↔ EN)
- [ ] Theme toggle works (light ↔ dark)
- [ ] Click any tattoo category (e.g., /tatuaje/old-school) — loads fine
- [ ] Click any piercing category (e.g., /piercing/urechi) — loads fine
- [ ] Guides pages work (e.g., /ghid/cum-obtii-un-tatuaj)
- [ ] Contact page loads with click-to-call
- [ ] Prices page shows the pricing table
- [ ] Mobile responsive (open on your phone)
- [ ] Images load (all 46 images)

---

## STEP 8: Going Live — Replace WordPress (when ready)

Once you're happy with the new site at `new.tatuaje.ro`, you have 2 options:

### Option A: Redirect tatuaje.ro to the new site (recommended, 2 min)

1. In cPanel → **Domains** → **Redirects**
2. Add a redirect:
   - Type: **Permanent (301)**
   - `https://tatuaje.ro` → `https://new.tatuaje.ro`
3. OR, better: **Change the Application URL** in the Node.js app settings to `tatuaje.ro` (removes the subdomain)
   - This requires removing WordPress from `public_html` first, or pointing the main domain to the Node.js app folder

### Option B: Keep both running (WordPress blog + Next.js main site)

1. Keep WordPress at `tatuaje.ro` (maybe move it to `tatuaje.ro/blog`)
2. Make the Node.js app serve `tatuaje.ro` (main domain)
3. This requires Apache .htaccess rules to route `/blog` to WordPress and everything else to Node.js

---

## TROUBLESHOOTING

### "502 Bad Gateway" or "Application Error"
- Go to cPanel → Setup Node.js App → click **Restart**
- Check the **Passenger log file** (click "View" next to it)
- Common cause: wrong Node.js version — try 18.x or 20.x
- Make sure `app.js` exists in the application root folder

### Blank page or 404
- Verify the Application URL matches your subdomain
- Make sure the `app.js` file is in the root of `new_tatuaje_ro/` (not in a subfolder)
- Check that `.next/` folder exists (not just `.next/standalone/.next/`)

### Images not loading
- Verify the `public/` folder is in the app root
- Check that `public/images/` contains 46 .jpg files
- Images should be at `https://new.tatuaje.ro/images/hero-tattoo.jpg`

### Styles look broken (no CSS)
- Verify `.next/static/` folder exists (contains CSS and JS chunks)
- Clear browser cache (Ctrl+Shift+R)
- Check the Network tab in browser DevTools for 404s

### App keeps crashing
- Check the Passenger log file (in cPanel Node.js app settings)
- Common cause: Node.js version mismatch — the app needs Node 18+
- Try changing the Node.js version and restart

### WordPress and Next.js conflict
- If both are on the same domain, you need .htaccess rules
- Recommended: use a **subdomain** for Next.js (e.g., `new.tatuaje.ro`)
- WordPress stays at `tatuaje.ro` — no conflicts

### "Cannot find module" errors
- The `node_modules/` folder might be missing or incomplete
- In cPanel Node.js app settings, click **Run NPM Install**
- Or re-upload the `node_modules/` folder via FTP

### Contact form doesn't send emails
- The form currently uses `mailto:` (opens user's email app)
- For real email sending, you need to set up an API route or use Formspree
- See "Contact Form Setup" section below

---

## CONTACT FORM SETUP (Optional)

The contact form currently uses a `mailto:` fallback. To make it send emails automatically:

### Option 1: Formspree (easiest, no code)

1. Go to https://formspree.io → sign up (free, 50 submissions/month)
2. Create a form → get the endpoint URL (e.g., `https://formspree.io/f/xxxxxxx`)
3. In cPanel File Manager, edit `public/js/contact-form.js` (or the built version)
4. Replace the form action with your Formspree URL

### Option 2: PHP mailer script (since you have cPanel/PHP)

1. Create a file `send.php` in your app root folder:
```php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $to = "contact@funkytattoo.ro";
    $subject = "Programare nouă de pe tatuaje.ro";
    $message = "Nume: " . $_POST["name"] . "\n";
    $message .= "Telefon: " . $_POST["phone"] . "\n";
    $message .= "Email: " . $_POST["email"] . "\n";
    $message .= "Serviciu: " . $_POST["service"] . "\n";
    $message .= "Mesaj: " . $_POST["message"];
    $headers = "From: noreply@tatuaje.ro";
    mail($to, $subject, $message, $headers);
    http_response_code(200);
    echo "OK";
}
?>
```
2. Update the contact form action to POST to `/send.php`

---

## PERFORMANCE NOTES

- **Node.js on cPanel shared hosting** runs via Phusion Passenger
- The app "sleeps" when idle and restarts on the first request (may take 2-3 seconds)
- For always-on performance, consider upgrading to a VPS or using Vercel (free)
- The site is fully static-generated (SSG) so most pages load instantly

---

## FILE STRUCTURE ON CPANEL

After deployment, your cPanel should look like:

```
/home/USERNAME/
├── public_html/          ← WordPress lives here (untouched)
│   ├── wp-admin/
│   ├── wp-content/
│   └── ...
├── new_tatuaje_ro/       ← Next.js app lives here
│   ├── .next/
│   │   ├── static/       ← CSS, JS chunks
│   │   ├── server.js     ← Next.js server
│   │   └── ...
│   ├── node_modules/     ← Dependencies
│   ├── public/
│   │   └── images/       ← 46 tattoo/piercing images
│   ├── app.js            ← Passenger entry point
│   ├── package.json
│   └── server.js         ← Next.js original entry (unused)
```

---

## SUMMARY

| What | Where |
|------|-------|
| WordPress (existing) | `tatuaje.ro` (public_html/) |
| Next.js site (new) | `new.tatuaje.ro` (new_tatuaje_ro/) |
| Node.js app | cPanel → Setup Node.js App |
| SSL | cPanel → SSL/TLS Status → AutoSSL |
| Logs | cPanel → Setup Node.js App → Passenger log |

**You're live!** Your Next.js tattoo & piercing website is running at `https://new.tatuaje.ro` alongside your WordPress site. 🎉