Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Dev app not working


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.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (8)


you can use winkapkz.com


Deleted comment

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 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.


2) Common causes & fixes (most frequent issues)

Wrong root path

NGINX 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;
 ...
}

SPA routing (React, Vue, Angular)

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;
}

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:

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:

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.

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 http://yourdomain.com/
  • 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):
cd /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.


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.

https://terrariaapk.net


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:

    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 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:

  • 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 luckhappy



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



I am using below version.

"name": "metronic-tailwind-react",
"version": "9.1.2"


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(