# Deploying to cPanel (CSS/JS not loading)

If the site loads but **CSS and styles don’t work** (plain white page, default links), the browser is not getting the `/_next/static/...` files. Fix it in one of these ways.

## Option A: Proxy `/_next` to your Node app (recommended)

Your app runs as a Node server (e.g. on port **9929**). If users open the site on **port 80** (or 443), Apache must forward **all** requests (including `/_next` and `/static`) to Node, not only the first page.

### 1. Build (no extra env needed if proxy is correct)

```bash
npm run build
```

### 2. Apache: forward `/` and `/_next` to Node

In cPanel, use **Application Manager** (or **Setup Node.js App**) so that Node runs on e.g. port **9929**. Then add a **proxy** so that the main domain (port 80) forwards to that app.

**If you can edit Apache config** (e.g. in `public_html/.htaccess` with `mod_proxy` enabled):

```apache
RewriteEngine On

# Proxy all requests to the Next.js app (Node on 9929)
RewriteCond %{REQUEST_URI} ^/_next|^/static|^/api [OR]
RewriteCond %{REQUEST_URI} !^/_
RewriteRule ^(.*)$ http://127.0.0.1:9929/$1 [P,L]
ProxyPassReverse / http://127.0.0.1:9929/
```

Some hosts require this form instead (in the main Apache config or an include):

```apache
ProxyPass /_next http://127.0.0.1:9929/_next
ProxyPassReverse /_next http://127.0.0.1:9929/_next
ProxyPass / http://127.0.0.1:9929/
ProxyPassReverse / http://127.0.0.1:9929/
```

Replace **9929** with the port your Node app uses. After changing, restart Apache if needed.

---

## Option B: Load assets from the Node URL (asset prefix)

If you **can’t** proxy `/_next` (e.g. Apache won’t forward it), you can make the HTML load CSS/JS from the **Node app URL** (including port).

### 1. Build with your exact app URL

Use the **exact** URL users use to open the app (including port if you use one), e.g.  
`http://beachlyfcapi.thesuitchstaging.com:9929` or `https://yourdomain.com`.

**Windows (PowerShell):**

```powershell
$env:NEXT_PUBLIC_ASSET_PREFIX="http://beachlyfcapi.thesuitchstaging.com:9929"; npm run build
```

**Linux / macOS:**

```bash
NEXT_PUBLIC_ASSET_PREFIX=http://beachlyfcapi.thesuitchstaging.com:9929 npm run build
```

### 2. Deploy

Upload the built app and run Node (e.g. `npm run start` or your cPanel Node start command). Users can open the site either:

- on the Node port (e.g. `:9929`), or  
- on port 80 if **only the main document** is proxied: then the HTML will still request CSS/JS from the `NEXT_PUBLIC_ASSET_PREFIX` URL (your Node server), so styles will load.

No trailing slash in `NEXT_PUBLIC_ASSET_PREFIX`.

---

## Quick check

1. Open the site in the browser.
2. Open **Developer Tools** (F12) → **Network**.
3. Reload the page.
4. Look for requests to `/_next/static/...` (e.g. `.css` or `.js`).
   - **Status 200** → assets are loading; if the page is still unstyled, it may be cache or a different issue.
   - **Status 404** → the server (Apache or Node) is not serving `/_next`. Use **Option A** (proxy) or **Option B** (asset prefix) above.

---

## If the app is in a subfolder

Example: `https://example.com/beachlyfe/`. Then set when building:

```bash
NEXT_PUBLIC_BASE_PATH=/beachlyfe npm run build
```

Use the same base path in your cPanel Node app start (or document root) so the app is served under `/beachlyfe/`.