Deploy React + Laravel API to cPanel

Persiapan Sebelum Deploy

Siapkan Domain / Subdomain

Contoh:

• laravel-react.fikry.my.id → React
• api-laravel-react.fikry.my.id → Laravel API

JANGAN digabung dalam satu domain, ini bikin debug jauh lebih mudah.

Laravel API

1. Upload Laravel

2. Extract file .zip

3. Edit Index.php

File index.php pada Laravel adalah entry point utama aplikasi. Semua request dari browser (HTTP/HTTPS) pertama kali masuk ke file ini, lalu diteruskan ke sistem routing Laravel.

File ini sangat krusial dan tidak boleh diubah sembarangan.

3.1 Autoload Composer

require __DIR__.'/../vendor/autoload.php';

Jika muncul error: ‘failed to open stream: No such file or directory’.

Artinya:

• vendor/ belum ada
• atau composer install belum dijalankan

3.2 Bootstrap app

$app = require_once __DIR__.'/../bootstrap/app.php';

Pastikan:

• Folder bootstrap/ ada
• File app.php ada

4. Create Database

Untuk Create User Database dan Database bisa mengikuti panduan berikut:

https://www.jagoanhosting.com/tutorial/cpanel/user-database-di-cpanel

Export & Import Database pada hosting:

https://www.jagoanhosting.com/tutorial/hosting/export-dan-import-database-pada-hosting

5. Edit file .env

Sesuaikan User Database, Database & Password Database pada .env

6. Buat file .htaccess

Jika masih ada kendala, terakhir buat file .htaccess:

RewriteEngine On
RewriteRule ^(.*)$ public/$1 [L]

Deploy React (FrontEnd)

Sebelum Build di Local:

1. Edit src/api.js

import axios from "axios";

const api = axios.create({
 baseURL: "https://api-laravel-react.fikry.my.id/api",
 headers: {
 Accept: "application/json",
 },
});

export default api;

Gunanya:

• React tahu API produksi
• Tidak request ke localhost lagi

2. Build React

(https://learn-with.fikry.my.id/2025/12/11/deploy-react-js-vite-to-cpanel/)

npm install
npm run build

Hasilnya Folder:

dist/

3. Upload Hasil Build ke Hosting

Upload isi folder dist ke:

/home/user/laravel-react.fikry.my.id

Pastikan ada:

• index.html
• assets/

4. Tambahkan .htaccess React (SPA)

RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Gunanya:

• Refresh halaman React tidak 404
• Routing React aman

——————————————————————————————————————–

Catatan

Panduan ini dibuat berdasarkan implementasi nyata, dengan asumsi kamu menggunakan stack teknologi berikut:

Laravel Sanctum

Dipakai untuk autentikasi berbasis token.

Tanpa Sanctum (atau sistem token serupa), Laravel tidak bisa mengenali user login dari React.
Jadi kalau login terasa “tidak nempel”, biasanya masalahnya ada di sini.

Axios

Digunakan sebagai penghubung komunikasi antara React dan Laravel API.

Kenapa Axios?

• Kodenya lebih rapi dibanding fetch
• Mudah dikembangkan (token, interceptor, handling error)

Tidak wajib, tapi sangat disarankan untuk project sungguhan.

React (Vite)

React di sini dibuild menjadi file statis, bukan aplikasi server.

Artinya:

• URL API akan dikunci saat build
• Salah endpoint → harus build ulang
• Urutan kerja sangat berpengaruh

MySQL

Semua data user disimpan di database.

Catatan penting:

• Password HARUS di-hash (bcrypt)
• Jangan pernah simpan password dalam bentuk plain text

Penutup

Dari kasus ini, ada beberapa pelajaran penting yang bisa diambil:

• Pastikan backend (Laravel API) sudah benar dan bisa dites
• Jika API berubah → edit React → build ulang → upload ulang
• Jangan buru-buru build React sebelum API siap

Catatan Akhir

Panduan ini bukan pengganti dokumentasi resmi, tapi panduan praktis berdasarkan pengalaman di lapangan.

Untuk penggunaan yang lebih kompleks atau skala production, sangat disarankan tetap mengacu ke:

• Dokumentasi resmi Laravel
• Dokumentasi resmi React & Vite

Gunakan panduan ini sebagai pegangan awal, bukan satu-satunya acuan.