Apa itu TALL Stack?
TALL Stack adalah solusi pengembangan full-stack yang digunakan untuk membangun aplikasi Laravel yang kuat, modern, dan reaktif. Tumpukan TALL terdiri dari empat bagian penting: Tailwind CSS, Alpine.js, Laravel, dan Livewire.
Tailwind
Tailwind CSS adalah utility-first framework CSS yang didesain untuk mempermudah dan mempercepat pembuatan aplikasi menggunakan desain custom. Framework tersebut diciptakan oleh Adam Wathan.
AlpineJS
Alpine adalah alat yang tangguh dan minimal untuk menyusun perilaku langsung di markup Anda. Anggap saja seperti jQuery untuk web modern. Framework tersebut diciptakan oleh Caleb Porzio.
Laravel
Laravel adalah kerangka web PHP sumber terbuka dan gratis dan ditujukan untuk pengembangan aplikasi web mengikuti pola arsitektur model–view–controller dan berdasarkan Symfony. Framework tersebut diciptakan oleh Taylor Otwell.
Livewire
Livewire adalah framework full-stack di Laravel yang dibuat untuk memudahkan pembuatan antarmuka reaktif tanpa menulis Javascript apa pun, benar, tanpa Javascript, semuanya dalam PHP. Framework tersebut diciptakan oleh Caleb Porzio.
Prerequisites
Pastikan Anda sudah menginstall program-program berikut:
- Composer
- PHP
- NodeJS
Langkah Instalasi
Instalasi Laravel
Berikut merupakan dokumentasi resmi untuk instalasi Laravel: https://laravel.com/docs/10.x/installation. Langkah berikutnya merupakan cheat sheet dan tips and trick untuk instalasi Laravel agar kalian tidak bingung ketika melakukan proses instalasi.
- Buat sebuah proyek Laravel baru dengan memilih folder yang diinginkan untuk instalasi proyek dan membuka command prompt/terminal dan ketik:
Kalian bisa memasukkan <nama-proyek>
sesuai dengan yang kalian inginkan. Composer akan membuat proyek kalian di dalam folder dengan <nama-proyek>
tersebut.
- Copy file
.env.example
dan paste di direktori yang sama dengan nama.env
- Di dalam file
.env
, kamu bisa mengubah variabel sesuai dengan kebutuhan proyek sepertiAPP_NAME
,APP_URL
,DB_DATABASE
, dan lain-lain.
- Di dalam file
- Generate Application Key dengan menjalankan perintah berikut:
- Di dalam direktori proyek, jalankan
php artisan serve
untuk menjalankan proyek tersebut. Anda bisa menambahkan flag seperti contohnya--port=8080
,--host="my-web.test"
, dan sepertinya untuk mengubah port dan host. Hal ini berguna apabila Anda ingin menjalankan beberapa proyek Laravel sekaligus untuk membedakan port dan domain proyek tersebut.- Untuk mengubah domain, pastikan anda sudah mengedit file
hosts
(jika Anda menggunakan Windows) yang terletak diC:\Windows\System32\drivers\etc\hosts
dan tambahkan127.0.0.1 my-app.test
di file tersebut. Anda hanya bisa menggunakan top-level domain (TLD).test
dan beberapa TLD lainnya jika ingin menjalankan proyek di local.
- Untuk mengubah domain, pastikan anda sudah mengedit file
- Setelah menjalankan
php artisan serve
Anda bisa membukahttp://127.0.0.1:8000/
(jika tidak menggunakan port dan domain sendiri) dan seharusnya akan muncul tampilan seperti berikut di website:
- Anda sukses menginstall Laravel ✨
Instalasi Tailwind
Berikut merupakan dokumentasi resmi untuk instalasi Tailwind di dalam proyek Laravel: https://tailwindcss.com/docs/guides/laravel. Langkah berikutnya merupakan cheat sheet dan tips and trick untuk instalasi Tailwind.
- Jalankan perintah berikut untuk menginstall Tailwind di dalam proyek Laravel:
- Copy dan paste kodingan CSS berikut ke dalam file
resources/css/app.css
:
- Copy dan paste kodingan berikut ke folder layout utama proyek, biasanya terletak di
./resources/views/welcome.blade.php
. Namun, sangat disarankan untuk membuat file blade baru dengan nama dan lokasi./resources/views/app.blade.php
untuk dijadikan layout utama proyek kalian.
- Anda bisa menjalankan
npm run dev
untuk menjalankan Tailwind di mode development dannpm run build
untuk meng-compile Tailwind untuk deployment - Anda sukses menginstall Tailwind di dalam proyek Laravel ✨
Install Livewire
Berikut merupakan dokumentasi resmi untuk instalasi Livewire di dalam proyek Laravel: https://livewire.laravel.com/docs/installation. Langkah berikutnya merupakan cheat sheet dan tips and trick untuk instalasi Livewire.
- Install Livewire menggunakan Composer dengan perintah berikut:
- Secara default, Livewire memasukkan aset JavaScript dan CSS yang diperlukan ke setiap halaman yang menyertakan komponen Livewire. Jika Anda ingin kontrol lebih besar, Anda dapat memasukkan aset secara manual pada halaman menggunakan arahan Blade berikut:
Instalasi AlpineJS (Otomatis Terinstall Bersama Livewire)
Karena Alpine dipaketkan dengan aset JavaScript Livewire, Anda harus menyertakan @livewireScripts
di setiap halaman yang menggunakan AlpineJS. Meskipun Anda tidak menggunakan Livewire di halaman itu.
Instalasi Manual AlpineJS (Tidak perlu jika sudah menginstall Livewire)
Berikut merupakan dokumentasi resmi untuk instalasi AlpineJS sebagai module: https://alpinejs.dev/essentials/installation#as-a-module. Langkah berikutnya merupakan cheat sheet dan tips and trick untuk instalasi AlpineJS.
- Jalankan perintah berikut untuk menginstall AlpineJS di dalam proyek Laravel:
- Setelah itu, import AlpineJS di file
bootstrap.js
, yang terletak di./resources/js/bootstrap.js
. Mari impor Alpine di bagian bawah file bootstrap kita:
- Sekarang, yang perlu kita lakukan hanyalah menginisialisasi AlpineJS menggunakan kodingan berikut:
- Jika Anda menginginkan lebih banyak fleksibilitas dengan AlpineJS, seperti mengakses Alpine menggunakan devtools Alpine.js, Anda dapat menambahkan Alpine ke objek window. Hal ini bersifat optional.
- Langkah terakhir adalah dengan mengubah kodingan vite sebelumnya untuk menambahkan juga
'resources/js/app.js'
.
- Anda sukses menginstall AlpineJS di dalam proyek Laravel ✨
Bonus: Instalasi Prettier (Tailwind, Laravel, PHP)
Berikut merupakan dokumentasi resmi untuk instalasi Tailwind Prettier di dalam proyek Laravel: https://livewire.laravel.com/docs/installation.
Laravel secara native tidak mempunyai support untuk Prettier di dalam blade, jadi kita bisa menggunakan plugin berikut: https://github.com/shufo/prettier-plugin-blade
Terdapat sebuah tutorial yang bagus yang membahas instalasi plugin Prettier untuk Blade dan berikut link untuk tutorial tersebut: https://parsinta.com/articles/plugin-prettier-untuk-blade-template-hlu4pf
Finalisasi
Selamat! Anda berhasil menginstall TALL Stack (Tailwind, AlpineJS, Laravel, Livewire). Jika terdapat kendala dalam instalasi, Anda bisa merujuk ke dokumentasi resmi dan link-link untuk dokumentasi tersebut sudah dicantumkan di dalam artikel ini.