Integrasi React.js, Tailwind CSS, Shadcn/UI, dan Vite dengan Laravel di Ubuntu memungkinkan pengembangan frontend modern yang cepat, efisien, dan estetis. Ikuti langkah-langkah berikut untuk menyiapkan lingkungan pengembangan yang optimal. Dengan menambahkan Laravel Octane dan RoadRunner, aplikasi Anda akan memiliki performa lebih cepat dan efisien dibandingkan menggunakan PHP-FPM biasa. Octane memanfaatkan worker yang selalu aktif sehingga memangkas waktu booting aplikasi Laravel.
1. Install Node, NPM, dan Vite
sudo apt update
sudo apt install nodejs npm
Periksa instalasi:
node -v
npm -v
npm install -g npm@10.9.2
npm install --save-dev vite laravel-vite-plugin
2. Integrasi React dengan Laravel
npm install react react-dom
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./components/App";
ReactDOM.createRoot(document.getElementById("app")).render(<App />);
import React from "react";
function App() {
return (
<div className="p-4 text-center text-xl font-bold">
Hello from React + Tailwind + Shadcn!
</div>
);
}
export default App;
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [
laravel({
input: "resources/js/app.jsx",
refresh: true,
}),
react(),
],
});
3. Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.jsx",
],
theme: {
extend: {},
},
plugins: [],
};
@tailwind base;
@tailwind components;
@tailwind utilities;
import "../css/app.css";
4. Install Shadcn/UI
npx shadcn@latest init
npx shadcn@latest add table
npx shadcn@latest add accordion
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu
npx shadcn@latest add pagination
npx shadcn@latest add popover
import { Button } from "@/components/ui/button";
function App() {
return (
<div className="p-4">
<Button>Click me</Button>
</div>
);
}
5. Install Router dan Axios
npm install react-router-dom
npm install axios
6. Bangun Aplikasi
php artisan serve
npm run dev
7. Build Production Files
Jika sudah siap, jalankan:
npm run build
8. Tambahkan Template Blade (Opsional)
Edit resources/views/welcome.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel + React</title>
@viteReactRefresh
@vite('resources/js/app.jsx')
</head>
<body>
<div id="app"></div>
</body>
</html>
Tips Optimalisasi untuk Mobile Web
p-4, flex, justify-center, items-center untuk membuat UI responsif.
<div className="p-4 md:p-6 lg:p-8">
Responsive Content
</div>
const MyComponent = React.lazy(() => import("./MyComponent"));
Dengan mengikuti langkah-langkah di atas, Anda berhasil mengatur React.js, Tailwind CSS, Shadcn/UI, dan Vite sebagai frontend di Laravel 8 untuk mobile web development. Kombinasi teknologi ini memberikan performa tinggi, UI yang responsif, dan pengalaman pengembangan yang efisien.
Laravel Octane mempercepat performa aplikasi Laravel dengan server RoadRunner atau Swoole. Berikut adalah langkah-langkah konfigurasi Laravel Octane menggunakan RoadRunner sebagai server.
Pastikan Anda sudah berada di direktori root proyek Laravel, lalu jalankan perintah berikut:
composer require laravel/octane
Setelah instalasi selesai, jalankan installer Laravel Octane:
php artisan octane:install
Pilih opsi RoadRunner saat diminta.
Laravel Octane memerlukan RoadRunner binary. Anda dapat mendownloadnya langsung melalui perintah berikut:
./vendor/bin/rr get-binary
Pastikan binary dapat dieksekusi:
chmod +x ./vendor/bin/rr
Secara default, Laravel Octane akan membuat file konfigurasi octane.yaml di root proyek Anda. Jika tidak, buat file tersebut dengan isi berikut:
server:
command: "php artisan octane:start --server=roadrunner --host=127.0.0.1 --port=8000"
http:
address: 127.0.0.1:8000
workers:
command: "php artisan octane:worker"
pool:
numWorkers: 4
maxJobs: 1000
Keterangan:
address: RoadRunner akan berjalan di 127.0.0.1:8000. Pastikan Nginx mengarah ke alamat ini.numWorkers: Jumlah worker sesuai dengan kapasitas CPU server Anda.Jalankan RoadRunner untuk memulai Laravel Octane:
php artisan octane:start --server=roadrunner --host=127.0.0.1 --port=8000
Jika ingin menjalankan server di background (daemon):
php artisan octane:start --server=roadrunner --host=127.0.0.1 --port=8000 --daemon
Edit file konfigurasi Nginx Anda (misalnya: /etc/nginx/sites-available/laravel) agar Nginx meneruskan request ke RoadRunner:
server {
listen 80;
server_name urlaplikasianda.teltics.in;
root /data/data/urlaplikasianda/public;
index index.php index.html index.htm;
# Arahkan request ke Laravel Octane
location / {
proxy_pass http://127.0.0.1:8000; # Port RoadRunner
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# Cache static assets
location ~* \.(jpg|jpeg|gif|png|css|js|ico|webp|woff|woff2|ttf|svg|otf|eot)$ {
expires max;
log_not_found off;
access_log off;
}
# Deny access to hidden files
location ~ /\. {
deny all;
access_log off;
log_not_found off;
}
}
Pastikan Nginx diarahkan ke RoadRunner yang berjalan di 127.0.0.1:8000.
sudo systemctl restart nginx
php artisan octane:start --server=roadrunner
http://urlaplikasianda.teltics.in
Untuk memastikan performa Laravel Octane optimal, lakukan langkah-langkah berikut:
php artisan config:cache
php artisan route:cache
php artisan view:cache
.env:
APP_DEBUG=false
APP_ENV=production
Gunakan tool seperti Supervisor untuk memastikan RoadRunner berjalan otomatis dan restart jika gagal.
Buat file /etc/supervisor/conf.d/laravel-octane.conf:
[program:laravel-octane]
command=php artisan octane:start --server=roadrunner --host=127.0.0.1 --port=8000
autostart=true
autorestart=true
stderr_logfile=/var/log/laravel-octane.err.log
stdout_logfile=/var/log/laravel-octane.out.log
user=www-data
Reload Supervisor:
sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl start laravel-octane
Dengan menambahkan Laravel Octane dan RoadRunner, aplikasi Anda akan memiliki performa lebih cepat dan efisien dibandingkan menggunakan PHP-FPM biasa. Octane memanfaatkan worker yang selalu aktif sehingga memangkas waktu booting aplikasi Laravel.
Integrasi ini memastikan pengembangan mobile web dengan React.js, Tailwind CSS, dan Shadcn/UI berjalan optimal di Laravel dengan performa tinggi.
🚀 Selamat mencoba dan tingkatkan performa aplikasi Anda! Selamat mengembangkan mobile web modern Anda!
npm run build).p-4 (padding), text-center, dan flex.127.0.0.1:8000..env)
