laravel react sample app

Aplikasi Laravel React untuk BigCommerce

Ini adalah aplikasi BigCommerce dasar dengan dua layar, tampilan ringkasan katalog dan daftar pesanan yang dapat dibatalkan, dibuat menggunakan Laravel dan React.

Ini dimaksudkan untuk mempercepat kemampuan Anda dalam membawa konsep aplikasi ke sesuatu yang dapat digunakan dalam panel kontrol BigCommerce. Toko langsung dapat memasang aplikasi ini saat dijalankan secara lokal.

Panduan mengenai langkah-langkah yang diambil untuk memproduksi aplikasi ini, beserta langkah-langkah yang diperlukan untuk membuat aplikasi di BigCommerce, dapat dibaca di sini.

Prasyarat & Instalasi

Sebelum terjun, Anda sebaiknya memastikan bahwa persyaratan sistem telah terpenuhi:

• PHP (Panduan Instalasi)
• Komposer (Panduan Instalasi)
• Laravel (Panduan Instalasi)

Untuk memudahkan pengembangan PHP dan memungkinkan aplikasi yang Anda kembangkan agar mudah dibagikan, Anda dapat menggunakan Valet atau Homestead, bergantung pada OS Anda:

• Sertifikat SSL Lokal (Rekomendasikan Valet atau Homestead untuk memudahkan pengaturan)
  • Mac OS: Valet (Panduan Instalasi)
  • Windows / Linux: Homestead (Panduan Instalasi)

Kami akan menggunakan Valet untuk beberapa langkah di bawah ini, namun fungsi untuk menghosting dan berbagi situs serupa di Valet dan Homestead. Yang lebih penting dalam tutorial ini adalah cara mengkonfigurasi Laravel untuk menggunakan React dan terhubung dengan BigCommerce.

Untuk menginstal dependensi PHP:

composer install

Dan ketergantungan JS:

npm install

Untuk menguji di toko BigCommerce, Anda dapat membuat uji coba gratis di bigcommerce.com atau meminta toko sandbox gratis dengan mendaftar menjadi mitra teknologi.

Membuat Laravel dan React Berjalan Bersama

Di sinilah kita akan membuat dasar untuk pengembangan di masa depan: aplikasi sederhana yang dimuat pada URL tertentu di browser Anda dan memuat komponen React alih-alih layar default Laravel.

Membuat basis kode Laravel baru Anda dapat menggunakan perintah Laravel yang membuat boilerplate awal untuk aplikasi di direktori ~/Sites atau menggunakan Composer:

composer global require laravel/installer
laravel new laravel-react-bigcommerce-app

atau

composer create-project laravel/laravel laravel-react-bigcommerce-app

Kunjungi alamat aplikasi untuk memastikannya aktif secara lokal:

Setelah perintah di atas selesai, kita perlu mengatur direktori agar Valet dapat melayani aplikasi dengan aman.

 cd laravel-react-bigcommerce-app
valet link
valet secure

Anda sekarang dapat mengunjungi URL berikut di browser Anda dan melihat layar selamat datang default Laravel:

https://laravel-react-bigcommerce-app.test

Siapkan React sebagai kerangka JS menggunakan Breeze dan Inersia

Larvel Breeze memberikan titik awal yang minimal dan sederhana untuk membangun aplikasi Laravel, dengan fitur otentikasi. Ini didukung oleh Blade dan Tailwind tetapi dapat dikonfigurasi sebagai SPA menggunakan Inersia. Dalam contoh ini kita akan memperkuat frontend kita dengan react.

Pertama mari kita instal Breeze:

composer require laravel/breeze --dev

Kemudian kita menginstal perancah reaksi:

php artisan breeze:install react

Catatan: perintah terakhir ini dijalankan npm install jadi tidak perlu menjalankan perintah ini.

Terakhir, jalankan aplikasi:

npm run dev

URL Local sekarang seharusnya tersedia di konsol Anda untuk mengunjungi aplikasi reaksi Anda

http://127.0.0.1:5173/

Referensi

https://laravel.com/docs/10.x/installation#proyek-laravel-pertama Anda https://laravel.com/docs/10.x/starter-kits

Berkontribusi

Permintaan tarik dipersilakan. Untuk perubahan besar, silakan buka terbitan terlebih dahulu untuk mendiskusikan apa yang ingin Anda ubah.

Lisensi

MIT