How to Deploy Laravel 12 with ReactJS (Vite) on Shared Hosting — A Beginner’s Guide

Are you building a Laravel 12 backend with a beautiful ReactJS frontend using Vite, and now scratching your head thinking:

“How do I deploy this on a shared hosting server like Hostinger, Namecheap, or GoDaddy?”

You’re not alone.

Deploying full-stack apps on shared hosting can be tricky, especially when combining Laravel (PHP) and ReactJS (JavaScript). But don’t worry — this guide will walk you through step-by-step, in plain English.

🧰 What You’ll Need

Before we dive in, here’s what you’ll need:

• ✅ A Laravel 12 app using ReactJS frontend with Vite
• ✅ Access to a shared hosting account (cPanel or FTP)
• ✅ Basic understanding of terminal/CLI and file structure
• ✅ PHP 8.2+ support on hosting

🗺️ Deployment Roadmap

We’ll cover:

1. 🏗️ Building React for production
2. 🛠️ Configuring Laravel to load React
3. 📁 Organizing files for shared hosting
4. ⚙️ Updating .env, index.php, and .htaccess
5. ✅ Final testing

🏗️ Step 1: Build Your React Frontend with Vite

Make sure you have React installed inside your Laravel app (usually in resources/js or resources/react).

Run this in your terminal:

npm run build

By default, Vite will output static files into:

public/build/

But you can customize the output directory in vite.config.js like this:

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'public/react',
    emptyOutDir: true
  }
});

Now your production-ready React app is inside:

public/react/
├── index.html
├── assets/
├── js/
├── css/

🛠️ Step 2: Serve React App from Laravel

Add a fallback route in your routes/web.php:

use Illuminate\Support\Facades\Route;

Route::get('/{any}', function () {
    return file_get_contents(public_path('react/index.html'));
})->where('any', '.*');

✅ This ensures that all unmatched routes are served by index.html, so React Router can handle them — perfect for SPAs.

📁 Step 3: Upload Files to Shared Hosting

Shared hosting usually places web files under public_html/.

🔧 Folder Structure

Here’s how to organize it:

public_html/
├── index.php                  <-- Laravel's public/index.php
├── react/                     <-- Your React Vite build
├── js/, css/, assets/         <-- Auto-generated by Vite
├── your-laravel-project/
│   ├── app/
│   ├── bootstrap/
│   ├── routes/
│   ├── vendor/

Important: Move Laravel core files out of public_html if your hosting allows it. Otherwise, nest them properly and update index.php.

📝 Step 4: Configure Laravel and Hosting

✅ Update .env for Production

Set appropriate values in .env:

APP_ENV=production
APP_DEBUG=false
APP_URL=https://yourdomain.com

Run the optimizers:

php artisan config:cache
php artisan route:cache
php artisan view:cache

🔐 Set Permissions

Ensure storage/ and bootstrap/cache/ are writable:

chmod -R 775 storage
chmod -R 775 bootstrap/cache

You can do this via cPanel File Manager or SSH if allowed.

🪄 Step 5: Tweak .htaccess for Routing

Inside public_html/.htaccess, make sure you have:

<IfModule mod_rewrite.c>
    RewriteEngine On

    # Redirect everything to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ index.php [L]
</IfModule>

This enables clean URLs and allows both Laravel and React routes to work smoothly.

🎨 Bonus: Sample React index.html

Here’s what your React-built index.html in public/react/ might look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React App</title>
    <link rel="stylesheet" href="/react/assets/app.css">
    <script type="module" src="/react/assets/app.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

✅ Make sure paths like /react/assets/... are correctly prefixed.

📌 Final Checklist

🧠 Key Takeaways

• React with Vite works great with Laravel, even on shared hosting
• SPA routing needs fallback to index.html
• Clean organization in public_html is critical
• vite.config.js should direct output to a known public folder
• .htaccess and correct asset paths make or break your app