How to Host a React App on Hostinger (Step-by-Step)

Category: Web Development · Read time: 9 minutes · Keyword: how to host react app on hostinger

Introduction

Hosting a React app on Hostinger is simpler than most people expect. A production React build is just a folder of static files — HTML, JavaScript, CSS, and images — and any shared hosting plan can serve it. You don't need a VPS, and you don't need to pay for a Node.js server unless your app talks to a backend you also want to run there.

In this tutorial you'll go from a finished React project on your laptop to a live site on your own domain. We'll build the app, fix the one thing that trips most people up (client-side routing), upload it through hPanel, and verify everything works. I'll use a Vite project as the example, since Vite is the modern default for new React apps, but the steps are the same for Create React App — only the output folder changes.

By the end you'll have a fast, free-SSL React site running on Hostinger's shared hosting.

What you'll need

• A React project that runs locally. Created with Vite (npm create vite@latest) or Create React App.
• Node.js and npm installed on your machine to run the production build.
• A Hostinger plan. The Premium shared plan is enough for a static React app. You only need Business or higher if you also want to run a Node.js server alongside it.
• Your domain connected in hPanel (Hostinger gives you a free domain for the first year on annual plans).
• Access to hPanel, Hostinger's control panel, and ideally an FTP account for faster uploads.

If you haven't bought a plan yet, Hostinger's Premium tier is the one most readers start with:

👉 Check Hostinger's current plans and pricing

Can Hostinger host a React app?

Yes — with one important distinction.

A React app built for production is static. All the framework code runs in the visitor's browser, so the server only needs to send files. That works on Hostinger's cheapest shared plans, including Premium.

The exception is server-side rendering (SSR) or a Node.js backend. If you're using Next.js with SSR, Remix, or an Express API, you need an environment that runs Node.js. On Hostinger that means a Business plan or a Cloud/VPS plan with the Node.js app feature. For a plain client-side React app, shared hosting is all you need.

Here's the quick comparison:

If your stack needs Node.js, my Next.js deployment guide covers the server-rendered side. The rest of this article is for the client-side case, which is the majority of React projects.

Step 1: Build your React app for production

First, create an optimized production build. Never upload the development version — it's slow, large, and exposes your source structure.

Open your project folder in the terminal and run the build command:

For Vite:

npm install
npm run build

For Create React App:

npm install
npm run build

Both commands output a folder of static files:

• Vite writes to dist/
• Create React App writes to build/

Inside that folder you'll find index.html, an assets/ (or static/) folder, and your bundled JavaScript and CSS. This folder — not your project folder — is what goes on the server. That single distinction prevents a lot of confusion later.

Run npm run preview (Vite) to confirm the production build works before you upload it. If it renders locally, it will render on Hostinger.

Step 2: Set the correct base path (only if needed)

This step matters when your React site lives in a subdirectory or on an addon domain, not on the root of the main domain.

• If your app will be served from https://yourdomain.com/, skip this step.
• If it will be served from https://yourdomain.com/app/, you must tell the bundler where the assets live, or you'll get a blank page and 404s for your JS files.

For Vite, add a base to vite.config.js:

export default defineConfig({
  plugins: [react()],
  base: '/app/',
})

For Create React App, add a homepage to package.json:

{
  "homepage": "/app/"
}

Then rebuild. If you ever move the app to the domain root, remove this setting and rebuild again.

Step 3: Add an .htaccess file for React Router

This is the step that causes the classic "404 on refresh" bug.

A client-side React app with React Router handles navigation in the browser. When a visitor clicks from / to /about, no new page is requested from the server — React just swaps the view. But if they refresh the page or open https://yourdomain.com/about directly, the browser asks Hostinger for a file at /about. That file doesn't exist, so Apache returns a 404.

The fix is a rewrite rule that sends every request to index.html, letting React Router take over. Create a file named .htaccess inside your build output folder (next to index.html) with this content:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

The two RewriteCond lines make sure real files and folders (your images, CSS, and JS assets) are still served normally — only unknown paths fall back to index.html.

If your app is in a subdirectory, change RewriteBase / and the last line to that subdirectory, for example RewriteBase /app/ and RewriteRule . /app/index.html [L].

While you're at it, add a caching block so repeat visits are fast:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
</IfModule>

Because Vite and CRA hash your asset filenames (like index-a1b2c3.js), long cache times are safe — a new build produces new filenames automatically.

Step 4: Upload the build to Hostinger

You have two easy options: the hPanel File Manager or FTP. Use the File Manager for a one-off upload, and FTP if you'll deploy often.

Option A — hPanel File Manager

1. Log in to hpanel.hostinger.com and open Files → File Manager.
2. Navigate to your site's document root. On Hostinger this is public_html inside your website's folder.
3. Delete the default placeholder files (like the default.php or landing page) so they don't shadow your app.
4. Open your local dist/ (Vite) or build/ (CRA) folder, select everything inside it, and upload it into public_html.

⚠️ Upload the contents of the build folder, not the folder itself. The result should be public_html/index.html, not public_html/dist/index.html. This is the single most common deployment mistake.

Option B — FTP

FTP is faster for many files and lets you re-upload only what changed.

1. In hPanel go to Files → FTP Accounts and note the host, username, password, and port.
2. Connect with any FTP client (FileZilla, Cyberduck) — or lftp from the terminal.
3. Upload the contents of dist/ or build/ into the public_html directory, overwriting existing files.

If you deploy repeatedly, uploading the whole folder every time is wasteful. Tools like rsync or your FTP client's sync feature only transfer changed files.

Step 5: Point your domain and enable SSL

If your domain is registered or connected through Hostinger, DNS is usually already set up. Confirm under Domains in hPanel that the domain points to your hosting plan.

Hostinger issues a free SSL certificate automatically — you don't need to install Let's Encrypt yourself. Once DNS resolves, open Security → SSL and make sure the certificate is active for your domain. Then visit https://yourdomain.com and check for the padlock.

If you bought your domain elsewhere, see the domain-connection steps, then give DNS a little time to propagate (usually minutes, up to a few hours).

Step 6: Test your routes and performance

Before you call it done, run through this checklist:

• Home page loads at https://yourdomain.com.
• Deep links work — open https://yourdomain.com/about directly in a new tab and refresh. If you see a 404 here, your .htaccess from Step 3 isn't in the right place.
• Assets load — open DevTools → Network and confirm your JS and CSS return 200, not 404 (a wrong base path shows up here).
• HTTPS is enforced — the padlock shows and http:// redirects to https://.
• No mixed content — if any request is still http://, browsers will block it. Fix hardcoded http:// API or asset URLs.

If everything passes, your React app is live.

Bonus: deploy automatically with Git

If you update your app often, manual uploads get old fast. Two options:

• Git deployment. Some Hostinger plans let you connect a Git repository in hPanel and pull changes to public_html. You still need to commit your build output, or run the build in CI first.
• GitHub Actions. Build the app in a workflow and deploy the output over FTP/SFTP on every push to main. This keeps your repository clean — you commit source, not build artifacts.

Either way, the destination is the same: the static contents of dist/ or build/ in public_html.

Troubleshooting common React hosting issues

Blank white page after upload. Almost always a wrong base/homepage path or a missing asset folder. Check the Network tab for 404s, and confirm index.html is directly in public_html.

404 when refreshing a route. The .htaccess SPA rule is missing or in the wrong folder. It must sit next to index.html.

Old version keeps showing. Your browser or Hostinger's cache is serving the previous build. Hard-refresh (Cmd/Ctrl + Shift + R) and confirm the files actually uploaded.

API calls fail in production but work locally. Environment variables like REACT_APP_* (CRA) or VITE_* (Vite) are baked in at build time, not read at runtime. Set them before running the build, then rebuild and re-upload.

You need a Node.js backend. Static hosting can't run Express or SSR. Move to a Business/Cloud plan with the Node.js feature, or host the API separately and let the React front end call it.

FAQ

Can I host a React app on Hostinger's cheapest plan? Yes. A client-side React production build is just static files, so the Premium shared plan can serve it. You only need a Business or Cloud plan if your project needs a Node.js runtime for SSR or a backend API.

Why does my React app show a 404 when I refresh? Because React Router handles routes in the browser, not on the server. Add the .htaccess rewrite rule that sends unknown paths to index.html, and the refresh problem disappears.

Should I upload the dist or build folder, or its contents? Upload the contents. The files inside dist/ (Vite) or build/ (CRA) must land directly in public_html, so that public_html/index.html exists.

Does Hostinger support Node.js for React? Hostinger runs Node.js apps on Business and higher plans. For server-side rendering with Next.js or a custom Express backend, choose one of those. For a static React app, any shared plan works.

How do I update my React site after making changes? Run npm run build again, then upload the new output to public_html, overwriting the old files. If you use Git or GitHub Actions, push your changes and let the pipeline deploy the fresh build.

Is Hostinger fast enough for a React app? For a static React site, yes. Hostinger's LiteSpeed servers, built-in caching, and free CDN on higher plans serve static assets quickly. Performance then depends mostly on your bundle size and how you split your code.

Conclusion

Hosting a React app on Hostinger comes down to four things: build for production, upload the contents of the build folder to public_html, add the .htaccess SPA rule, and enable SSL. Get those right and your app is live on a fast, affordable plan — no server management required.

If you're still choosing a host, my full Hostinger review covers pricing and renewal, and the Hostinger vs Bluehost comparison and Hostinger vs GoDaddy breakdown show how it stacks up against the alternatives. New to hosting altogether? Start with what web hosting actually is.

👉 Get started with Hostinger