# Quick answer (TL;DR)

Most likely the site is failing on the server because NGINX isn’t serving the `dist` files the way your build expects (wrong `root` path, missing `index.html`, SPA routing, or wrong `publicPath`/`base`), or the server/permissions/firewall/DNS is blocking it. Fix the NGINX server block to point at the exact `dist` folder, add an SPA `try_files` fallback, check logs (`/var/log/nginx/error.log`), and ensure build assets were produced with the correct base path.

Below are step-by-step checks, commands and a sample NGINX config you can copy/paste — plus a short Terraria APK analogy so it clicks.

---

# 1) Quick checks (run these first)

Run these from the server shell (or locally when appropriate):

* Does `dist` contain `index.html` and static asset folders (`css`, `js`, `assets`)?
`ls -la /path/to/your/dist`

* Can NGINX read those files?
`sudo chown -R www-data:www-data /path/to/your/dist`
`sudo chmod -R 755 /path/to/your/dist`

* Is NGINX configured to point at the right folder? Check your site’s `root` in its server block.
`sudo nginx -t` (test config)
`sudo systemctl restart nginx`

* Test fetching index directly from the server:
`curl -I
or
`curl -I
This shows HTTP response headers and status.

* Check logs for errors (most useful):
`sudo tail -n 200 /var/log/nginx/error.log`
`sudo tail -n 200 /var/log/nginx/access.log`

* Browser devtools: open Network tab and see which file fails (404, 403, 500) and console errors (often missing JS or wrong MIME).

* DNS / Domain: validate the domain resolves to the right server (on your workstation):
`nslookup yourdomain.com` or `dig yourdomain.com` — make sure it points to the server IP.

* Firewall/ports: confirm port 80/443 open: `sudo ufw status` or check cloud provider security group.

---

# 2) Common causes & fixes (most frequent issues)

### Wrong `root` path

NGINX must point exactly to the `dist` folder containing `index.html`. Example:

```nginx
server {
listen 80;
server_name example.com www.example.com;

root /var/www/example.com/dist;
index index.html;
...
}
```

### SPA routing (React, Vue, Angular)

If you built a single-page app, direct URL navigation needs fallback to `index.html`. Use `try_files`:

```nginx
location / {
try_files $uri $uri/ /index.html;
}
```

### Wrong `publicPath` / `base` at build time

If your app expects assets under `/app/` but NGINX serves it from `/`, assets 404. Fix by rebuilding with correct base:

* **React (create-react-app)** — set `"homepage": "."` or correct URL in `package.json` before `npm run build`.
* **Vite** — set `base: '/'` in `vite.config.js`.
* **Vue CLI** — set `publicPath: '/'` in `vue.config.js`.
* **Angular** — set `<base href="/">` in `index.html` or use `ng build --base-href /`.

Then `npm run build` again and redeploy `dist`.

### File permissions (403)

If NGINX can’t read files it returns 403. Use:

```bash
sudo chown -R www-data:www-data /var/www/example.com/dist
sudo chmod -R 755 /var/www/example.com/dist
```

### SELinux blocking (CentOS/RHEL)

If SELinux is enforcing, you might need to set proper contexts:

```bash
sudo chcon -R -t httpd_sys_content_t /var/www/example.com/dist
```

### MIME types / compressed files

If compressed assets (.br/.gz) exist but NGINX not configured to serve them properly, browsers might break. Also ensure `gzip_static on;` only if you prepared `.gz` files.

### Missing `index.html` or build failed

Sometimes build fails or outputs to a different directory. Confirm `npm run build` produced files and you uploaded the right folder.

### DNS / SSL / Proxy problems

If domain not resolving or SSL misconfigured, browser may not connect. Check DNS records, CDN/proxy (Cloudflare) settings and that the server’s firewall allows 80/443.

---

# 3) Full minimal NGINX server block for a typical SPA

Drop this into `/etc/nginx/sites-available/your-site` (adjust paths & domain), then `nginx -t` and `systemctl reload nginx`.

```nginx
server {
listen 80;
server_name yourdomain.com www.yourdomain.com;

root /var/www/yourdomain.com/dist;
index index.html;

# Serve static files directly
location / {
try_files $uri $uri/ /index.html;
}

# Optional: cache static assets aggressively
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?)$ {
try_files $uri =404;
access_log off;
expires 30d;
add_header Cache-Control "public, max-age=2592000, immutable";
}

error_page 500 502 503 504 /50x.html;
location = /50x.html { root /usr/share/nginx/html; }
}
```

---

# 4) Helpful troubleshooting commands

* Check config: `sudo nginx -t`
* See errors while accessing URL: `curl -v
* Tail logs: `sudo tail -f /var/log/nginx/error.log`
* Confirm files exist: `ls -la /var/www/yourdomain.com/dist`
* Check owner/permissions: `stat /var/www/yourdomain.com/dist/index.html`
* Test serving with a simple HTTP server (rule out NGINX):

```bash
cd /var/www/yourdomain.com/dist
python3 -m http.server 8080
# then curl
```

If `python -m http.server` serves the site correctly but NGINX doesn’t, the problem is NGINX config/permissions/SELinux, not your build.

---

# 5) Checklist to fix now (one-pass)

1. `ls /path/to/dist` — ensure `index.html` and assets are present.
2. Update NGINX `root` to that `dist` folder.
3. Add `try_files $uri $uri/ /index.html;` for SPA.
4. `sudo chown -R www-data:www-data /path/to/dist && sudo chmod -R 755 /path/to/dist`
5. `sudo nginx -t && sudo systemctl reload nginx`
6. `sudo tail -n 200 /var/log/nginx/error.log` — fix reported issues.
7. If assets 404, check `publicPath/base` and rebuild (`npm run build`).
8. Confirm domain resolves to server IP; check firewall/port.

hen your project works on localhost but doesn’t load after deployment with Nginx, the issue usually comes from the Nginx configuration or build settings.

Here are the most common causes and fixes:

✅ 1. Check nginx.conf

If this is a Single Page Application (SPA) (like React, Vue, Angular), you need to tell Nginx to serve index.html for
Click here

When you run `npm run build`, your frontend is bundled into that **dist/** folder, but NGINX needs two things to serve it correctly:

1. **Point your server root to the dist folder**
In your NGINX config (`/etc/nginx/sites-available/your-site`), make sure you have something like:

```nginx
server {
listen 80;
server_name your-domain.com;
root /var/www/your-project/dist;
index index.html;

location / {
try_files $uri $uri/ /index.html;
}
}
```

* `root` must be the **full path** to that dist folder.
* The `try_files` directive ensures that your Single-Page App (SPA) always falls back to `index.html`.

2. **Check your `<base href>` (if using Angular) or publicPath (Vue/React)**

* If you’ve set a custom base URL in your HTML or build config, make sure it matches where you’re hosting the app.
* For example, if your site is at ` your build might need `npm run build -- --public-path /app/`.

Once you’ve adjusted those, reload NGINX:

```bash
sudo nginx -t # test the config
sudo systemctl reload nginx
```

If it’s still not loading, check:

* **File permissions** on the dist folder (`www-data:www-data` or your NGINX user)
* **Browser console & network tab** for 404s or CORS errors
* **NGINX error.log** (`/var/log/nginx/error.log`) for hints

---

> **Analogy with Wink MOD APK:**
> Deploying your SPA is a bit like distributing a modded APK (e.g., Wink MOD APK). Just as you have to repack the APK with the correct manifest entries, permissions, and signature so Android will install it, you also need to “repack” your build for your server—setting the right `root`, `publicPath`, and `try_files`—so that NGINX can correctly “install” and serve your app. Miss one small path or config tweak in either case, and your end users (or your APK) simply won’t load.

wink for pc

i also had the same issue with my site Snapseed QR Codes later i bought a domain designed the site and then migrated it to a real domain you may try the same if it worked for you best of luck

Hi

Could you please check this for React deployment?



Thanks

Hi

May I know which application and Metronic version are you using? Was it React?

Thanks