Welcome to my activity: Laravel Assets Compiling

Pendahuluan

1. Front End (FE) side development mengalami kemajuan dan perubahan yang sangat cepat.
2. Saat ini FE menjadi bagian yang sangat penting, karena berhubungan dan berinteraksi langsung dengan user. App akan terlihat bagus dan profesional ketika FE nya bagus dan intuitive
3. Banyak tools atau framework yang bisa digunakan untuk mempermudah dan mempercepat FE development, contoh Bootstrap, React JS, Vue Js, Angular dan lain sebagainnya.
4. FE ini berjalan disisi browser, jadi browser akan mendownload file JS dan CSS. Semakin komplek FE, maka file JS dan CSS akan semakin besar ukuranya, dan ini akan mempengaruhi loading time ketika membuka halaman web.
5. Jadi kita selaku developer perlu melakukan optimasi pada bagian FE
6. Salah satu tools yang widely used around the world adalah Webpack (https://webpack.js.org/).
7. Webpack adalah salah satu bundler tools yang luar biasa powerful, yang mampu mempersiapkan dan mengoptimasi aset FE (JS dan CC) supaya bisa secara optimal dijalankan pada browser
8. Salah satu kekurangannya adalah Webpack membutuhkan learning curve yang tinggi untuk bisa menggunakannya dengan baik.
9. Laravel Mix menyediakan Interface bagi laravel developer untuk bisa mengintegrasikan Webpack pada laravel project dengan lebih sederhana dan mudah.
10. Untuk lebih detail mengenai laravel mix bisa mengunjungi halaman https://laravel-mix.com/docs/main/what-is-mix atau https://laravel.com/docs/8.x/mix.
11. Untuk bisa menggunakan dan memanfaatkan laravel mix dengan baik, maka perlu meng-install NodeJS dan NPM.
12. Untuk lebih dental mengenai NodeJs dan NPM bisa mengunjungi halaman inni https://nodejs.org/en/.
13. Pastikan NodeJs dan NPM terinstall pada komputer masing-masing. Untuk versi nya gunakan versi latest

14. Saran
a. Perlu internet yang stabil
b. Saya sarankan menggunakan Mac atau Linux based OS, pengalaman saya di Windows sering terjadi error yang tidak diinginkan.
c. Kalau terjadi error jangan panik, cukup copy paste error message nya di google, biasanya diluaran sana sudah ada orang-orang yang pernah mengalami error tersebut dan men-share bagaimana cara menyelesaikanya

15. Laravel Mix dan Assets

16. Selesai

Bootstrap

1. Kita akan menggunakan Bootstrap untuk membantu kita dalam mendesain dan layouting halaman web. Jadi saya sarankan anda mempelajari bootstrap

2. Bootstrap (https://getbootstrap.com/) adalah salah satu CSS framework yang bisa membantu developer untuk mendesain dan meng kostumisasi halaman web dengan mudah dan cepat
3. Untuk melakukan integrasi Bootstrap pada Laravel project kita akan menggunakan plugin laravel/ui (https://github.com/laravel/ui).

4. Laravel ui adalah plugin yang dibangun di atas Framework Boostrap

5. Install plugin laravel/ui, Gunakan versi 3.0.0

composer require laravel/ui 3.0.0

a. Jika anda mengalami error seperti ini:

“Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 4096 bytes)”

b. Kita perlu men-setting environment variable COMPOSER_MEMORY_LIMIT=-1, sehingga command yang dijalankan menjadi seperti ini (Linux/Mac):

COMPOSER_MEMORY_LIMIT=-1 composer require laravel/ui 3.0.0

6. Install Bootstrap menggunakan laravel/ui

php artisan ui bootstrap

7. Sebagai tambahan kita perlu meng-install ui controller

php artisan ui:controllers

8. Selesai

9. Selesai

Compiling Assets Menggunakan Mix/Webpack

1. Untuk bisa menggunakan Mix, kita membutuhkan file package.json pada root folder laravel project. File package.json ini sama dengan file composer.json, tapi digunakan untuk frontend.

2. Secara default Laravel sudah membuat file package.json pada root project. Untuk instalasi plugin-plugin yang dibutuhkan di package.json, jalankan command dibawah ini. npm install

3. Setelah berhasil melakukan instalasi, makan ada ada folder node_modules dan package-lock.json pada root folder.

4. Pada file package.json kita lihat bagian scripts. Setiap key pada bagian key, bisa dijalankan sebagai command.

5. Untuk melakukan compiling assets, jalankan command dibawah ini npm run dev

6. Apabila berhasil compiling dengan benar, maka pada public folder akan dibuatkan public/css/app.css dan public/js/app.js

7. Sekarang kita tambahkan assets pada video. Buka file resources/views/layouts/app.blade.php

8. Pada browser buka halaman http://localhost:8000/posts, css bootstrap akan ke load, sehingga tampilannya menjadi seperti ini

9. Selesai

Versioning Assets

1. Secara default browser akan melakukan cache pada file .css dan .js, jadi kalau kita ada perubahan pada file app.css dan app.js, ada kemungkinan browser tidak melakukan load ulang karena sudah ada di cache.

2. Oleh karena itu di production kita harus selalu menambahkan url yang berbeda untuk file app.css dan app.js, biasanya dengan menambahkan parameter id, contoh app.css?id=xyz app.js?id=xyz

3. Dengan menggunakan laravel mix kita tidak perlu melakukannya dengan manual, mix sudah menyediakan helper dan configuration untuk implementasi versioning assets.

4. Versioning assets ini kita jalan pada production mode.

5. Buka file webpack.mix.js,

6. Compiling ulang assets dengan menjalankan command di bawah ini: npm run prod

7. Buka file resources/views/layouts/app.blade.php, ubah dari assest() helper menjadi mix() helper.

8. Pada halaman http://localhost:8000/post, inspect element dan lihat pada bagian . Parameter id akan selalu berubah ketika kita menjalankan command npm run prod. Ini memastikan browser untuk meload ulang asset yang baru di compile.