React Deployment on Separate Domain

This guide explains how to host frontend-source (React frontend) on a different domain than your Laravel backend API.

Step 1: Build React App

Open terminal inside the frontend-source folder and run:

npm install
npm run build

This generates production files in frontend-source/dist.

Step 2: Configure Environment

In the current release package, the frontend API URL is configured through Vite environment variables. Create a .env file inside frontend-source based on .env.example.

VITE_API_URL=https://api.yourdomain.com/api/v1
VITE_API_BASE_URL=https://api.yourdomain.com

After updating the environment file, run build again:

npm run build

Step 3: Upload Build Files

• Create/subdomain for frontend (for example app.yourdomain.com).
• Upload all files from frontend-source/dist to that domain document root.
• Do not upload source files; only the built dist output.

Step 4: Configure SPA Rewrite

React Router needs fallback to index.html.

Apache (.htaccess)

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

Nginx

server {
  listen 80;
  server_name app.yourdomain.com;
  root /var/www/frontend-source/dist;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

Step 5: Backend CORS

Allow frontend domain in backend CORS config: config/cors.php. For production, use explicit domain list instead of wildcard.

'allowed_origins' => [
    'https://app.yourdomain.com',
],

Step 6: SSL (Required)

• Enable HTTPS on both frontend and backend domains.
• Do not mix HTTP frontend with HTTPS backend (or vice versa).
• Renew certificates and force HTTPS redirects.

Step 7: Production Checklist

• Frontend domain opens successfully.
• Login request reaches backend API correctly.
• No browser CORS errors in Developer Console.
• Refresh on deep routes (example: /dashboard) works.
• Payment callback/return URLs are reachable publicly.

cPanel Quick Steps

1. Create subdomain (example: app.yourdomain.com).
2. Upload dist files into subdomain root.
3. Create .htaccess with SPA rewrite rules.
4. Enable SSL certificate.
5. Test login and key routes.

Common Problems and Fix

• Blank page: Wrong build upload path. Upload the contents of dist, not the folder itself.
• 404 on refresh: Missing SPA rewrite config.
• Network/CORS blocked: Add frontend domain in backend allowed_origins.
• Still calling old or wrong API: Recheck .env, confirm VITE_API_URL, then rebuild the frontend.