New Product!SaaSify - Animated Landing Page Template built with Next.js, Tailwind, Shadcn UI, ReUI & MagicUI Components
Preview SaaSify

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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


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 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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(