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

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:

🏗️ Building React for production
🛠️ Configuring Laravel to load React
📁 Organizing files for shared hosting
⚙️ Updating .env, index.php, and .htaccess
✅ 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

✅ Task	Status
`npm run build` done for React	✅
Route fallback to React `index.html`	✅
Laravel files uploaded	✅
`public/` contents in `public_html/`	✅
`.env` configured	✅
`storage/` permissions set	✅
`.htaccess` updated	✅

🧠 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

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

🧰 What You’ll Need

🗺️ Deployment Roadmap

🏗️ Step 1: Build Your React Frontend with Vite

🛠️ Step 2: Serve React App from Laravel

📁 Step 3: Upload Files to Shared Hosting

🔧 Folder Structure

📝 Step 4: Configure Laravel and Hosting

✅ Update `.env` for Production

🔐 Set Permissions

🪄 Step 5: Tweak `.htaccess` for Routing

🎨 Bonus: Sample React `index.html`

📌 Final Checklist

🧠 Key Takeaways

Laravel Mastery
Coaching Class Program

Daily Sessions

Real Projects

Best Practices

Career Support

Enrollment Closes In

Join the Program

Application Submitted!

What happens next?

Tags

Comments

Related Posts

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

🧰 What You’ll Need

🗺️ Deployment Roadmap

🏗️ Step 1: Build Your React Frontend with Vite

🛠️ Step 2: Serve React App from Laravel

📁 Step 3: Upload Files to Shared Hosting

🔧 Folder Structure

📝 Step 4: Configure Laravel and Hosting

✅ Update .env for Production

🔐 Set Permissions

🪄 Step 5: Tweak .htaccess for Routing

🎨 Bonus: Sample React index.html

📌 Final Checklist

🧠 Key Takeaways

Laravel Mastery Coaching Class Program

Daily Sessions

Real Projects

Best Practices

Career Support

Enrollment Closes In

Join the Program

Application Submitted!

What happens next?

Tags

Comments

Related Posts

✅ Update `.env` for Production

🪄 Step 5: Tweak `.htaccess` for Routing

🎨 Bonus: Sample React `index.html`

Laravel Mastery
Coaching Class Program