When I am running localhost it was good, when I am building to dev using this command "npm run build" I got the dist folder.
Once I deployed it then my domain is not loading.
Local host is working fine, when I am deploying the dist folder inside content everything into NGNIX server it was not laoding.
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.
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 http://localhost:80
or
curl -I http://127.0.0.1/index.html
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.
root pathNGINX must point exactly to the dist folder containing index.html. Example:
server {
listen 80;
server_name example.com www.example.com;
root /var/www/example.com/dist;
index index.html;
...
}
If you built a single-page app, direct URL navigation needs fallback to index.html. Use try_files:
location / {
try_files $uri $uri/ /index.html;
}
publicPath / base at build timeIf your app expects assets under /app/ but NGINX serves it from /, assets 404. Fix by rebuilding with correct base:
"homepage": "." or correct URL in package.json before npm run build.base: '/' in vite.config.js.publicPath: '/' in vue.config.js.<base href="/"> in index.html or use ng build --base-href /.Then npm run build again and redeploy dist.
If NGINX can’t read files it returns 403. Use:
sudo chown -R www-data:www-data /var/www/example.com/dist
sudo chmod -R 755 /var/www/example.com/dist
If SELinux is enforcing, you might need to set proper contexts:
sudo chcon -R -t httpd_sys_content_t /var/www/example.com/dist
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.
index.html or build failedSometimes build fails or outputs to a different directory. Confirm npm run build produced files and you uploaded the right folder.
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.
Drop this into /etc/nginx/sites-available/your-site (adjust paths & domain), then nginx -t and systemctl reload 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; }
}
sudo nginx -tcurl -v http://yourdomain.com/sudo tail -f /var/log/nginx/error.logls -la /var/www/yourdomain.com/diststat /var/www/yourdomain.com/dist/index.htmlcd /var/www/yourdomain.com/dist
python3 -m http.server 8080
# then curl http://localhost:8080
If python -m http.server serves the site correctly but NGINX doesn’t, the problem is NGINX config/permissions/SELinux, not your build.
ls /path/to/dist — ensure index.html and assets are present.root to that dist folder.try_files $uri $uri/ /index.html; for SPA.sudo chown -R www-data:www-data /path/to/dist && sudo chmod -R 755 /path/to/distsudo nginx -t && sudo systemctl reload nginxsudo tail -n 200 /var/log/nginx/error.log — fix reported issues.publicPath/base and rebuild (npm run build).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:
Point your server root to the dist folder
In your NGINX config (/etc/nginx/sites-available/your-site), make sure you have something like:
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.try_files directive ensures that your Single-Page App (SPA) always falls back to index.html.Check your <base href> (if using Angular) or publicPath (Vue/React)
https://your-domain.com/app/, your build might need npm run build -- --public-path /app/.Once you’ve adjusted those, reload NGINX:
sudo nginx -t # test the config
sudo systemctl reload nginx
If it’s still not loading, check:
www-data:www-data or your NGINX user)/var/log/nginx/error.log) for hintsAnalogy 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, andtry_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
May I know which application and Metronic version are you using? Was it React?
Thanks
I am using below version.
"name": "metronic-tailwind-react",
"version": "9.1.2"