404 Error on Loveable Website hosted on Hostinger

by

Have you built a website using a tool like Loveable.dev and hosted it on Hostinger? If yes, you might’ve seen this annoying problem:

Your site works great when you click around…
But when you refresh the page or open a link directly, it shows a 404 error.

Don’t worry—this is common and super easy to fix!

Why This Happens

Modern websites often work as single-page apps (SPA). This means the browser uses JavaScript to load pages without refreshing.

  • When you click links: Your browser loads content smoothly.
  • When you refresh or open a page directly: Hostinger looks for a file like /about or /contact and can’t find it—so it shows a 404 error.

What you need is to tell the server:
“Hey, no matter what URL someone opens, always show the index.html file!”

How to Fix It with a .htaccess File

If you’re using Hostinger (or any hosting that supports .htaccess), follow these steps:

Step-by-Step (Using File Manager)

  1. Log in to Hostinger’s hPanel
  2. Go to Files → File Manager
  3. Open the public_html folder
  4. Click New File and name it .htaccess (yes, with a dot in front)
  5. Paste this code inside the file:
apacheCopyEditRewriteEngine On  
RewriteCond %{REQUEST_FILENAME} !-f  
RewriteCond %{REQUEST_FILENAME} !-d  
RewriteRule ^(.*)$ /index.html [L,QSA]
  1. Click Save

What This Code Does

Here’s a simple explanation:

  • RewriteEngine On: Turns on the rule engine
  • RewriteCond %{REQUEST_FILENAME} !-f: Only run the rule if the file doesn’t exist
  • RewriteCond %{REQUEST_FILENAME} !-d: And if the folder doesn’t exist
  • RewriteRule ^(.*)$ /index.html [L,QSA]: Then load index.html instead

That’s it! Now your website knows how to handle direct links or refreshes.

Other Ways to Fix It

If the .htaccess method doesn’t work, try one of these:

Option 1: Hostinger Error Page Redirect

  1. Go to Website → Error Pages in your hPanel
  2. Set the 404 page to redirect to /index.html

Option 2: Use Hash-Based Routing

If you’re building your site, you can use URLs with a # (like /#/about)—these don’t need special server setup.

Still Stuck?

If you’ve followed the steps and it’s still not working, don’t worry—I can help!

Reach out to me via the Contact Form and I’ll personally help you fix the issue.

Things to Keep in Mind

  • The file is named .htaccess (with a dot at the start)
  • It has no extension
  • Place it in the same folder as index.html
  • Changes apply instantly in most cases
  • Clear your browser cache if things still look broken

You’re Done!

With this fix, your visitors can now:

  • Refresh pages without errors
  • Share links to any part of your site
  • Bookmark specific pages
  • Enjoy a smoother browsing experience

This method works for all modern frameworks like Loveable.dev, Bolt.new, React, Vue.js, Angular, and more.

Cheers to smooth builds and zero 404s!

Leave a Comment