Belajar Angular – Bagian 6 – Persiapan File Production

Belajar Angular - Bagian 6 - Persiapan File Production
Belajar Angular – Bagian 6 – Persiapan File Production

Belajar Angular – Bagian 6 – Persiapan File Production – Development Angular dengan bantuan Angular-CLI memang sangat dimudahkan baik dari mulai pembuatan project awal, penambahan berbagai komponen sampai pada pembuatan file production yang nantinya akan kita deploy atau host.

Tulisan ini merupakan serial pembahasan mengenai framework Angular, Anda mungkin ingin membaca tulisan lainnya berikut :

  1. Bagian 1 – Pengenalan dan Inisialisasi Project
  2. Bagian 2 – Membuat Komponen
  3. Bagian 3 – Membuat Service
  4. Bagian 4 – Membuat Route
  5. Bagian 5 – Membuat Custom Pipe atau Filter
  6. Bagian 6 – Persiapan File Production

Dengan Angular-CLI kita bisa dengan mudah menyiapkan file untuk production dengan beberapa perintah bawaan yang telah disediakan.

Berikut ini kita akan belajar bagaimana untuk menyiapkan file yang layak di deploy ke production serta beberapa catatan yang mungkin perlu diperhatikan :

Build file dengan Angular-CLI

Angular-CLI bisa men-generate file build yang bisa kita deploy ke production dengan cara

Dengan perintah ini kita akan mendapatkan folder /dist yang berisi file index.html dan beberapa file .js hasil generate. File-file ini dalam folder ini adalah file yang nantinya bisa kita deploy ke production.

Mudah bukan ?

Tapi coba kita buka salah satu file .js hasil build nya, kita akan menemukan kode javascript yang belum di minified dan tentunya ini bukan harapan kita untuk di deploy ke production, untung nya lagi Angular-CLi juga telah menyediakan perintah untuk build file dengan mode yang sudah ter-minified yakni dengan perintah

Set Base Href

Angular memiliki fitur untuk melakukan routing di frontend dan untuk bisa melakukan ini di production, kita mungkin akan perlu menyesuaikan base-href dari index.html kita terutama bila kita akan mendeploy aplikasi kita ke tempat yang bukan merupakan root dari domain Anda, misalkan irfan.com/apps/ maka kita perlu pindahkan base-href nya dari / ke /apps. Cara manual adalah dengan mengubah kode berikut sesuai dengan path yang akan digunakan di production.

Jika cara manual ini terlalu membuat Anda malas, maka kita bisa menambahkan option ketika akan build file menggunakan Angular-CLI seperti contoh

Setelah menjalankan ini, maka base-href yang ada di file index.html akan mengarah ke option tersebut.

Perintah diatas juga bisa disingkat seperti berikut

Set Deploy Url

Seperti pada kasus sebelumnya, jika kita ingin mendeploy ke tempat yang bukan merupakan root domain seringkali terjadi salah path termasuk dari file-file yang di generate oleh Angular-CLI.

Angular-CLI secara default akan membuatkan path yang mengarah ke file .js hasil build dengan tanpa path di depannya, contoh main.bundle.js. Secara teori harusnya tidak ada masalah dengan cara ini, karena dengan tidak menyebutkan path di depannya berarti akan diarahkan ke folder tempat index.html itu berada. Namun entah kenapa terkadang ada saja masalah dengan hal ini, dan salah satu caranya adalah dengan menambahkan relative path di depannya.

Cara manual yang bisa kita lakukan adalah dengan mengubah path main.bundle.js menjadi
/apps/main.bundle.js misalnya. Namun cara ini lumayan membuat capek dan rentan terjadi kelupaan, kabar baiknya lagi Angular-CLI juga telah menyiapkan option untuk hal ini jadi kita tidak perlu mengubah manual lagi namun menggunakan perintah seperti berikut

Atau bisa juga kita singkat seperti ini

Setelah menggunakan perintah ini maka path yang di generate oleh Angular-CLI akan disesuaikan ke path ini.

Set ke npm script

Perintah-perintah diatas tentu akan membuat kita lupa kalau tidak kita buat shortcut untuk mempermudah pekerjaan kita, jadi kita bisa memindahkan perintah itu ke dalam package.json kita di bagian script, seperti contoh

Dengan begini kita bisa dengan mudah memanggil perintah ini kembali, cukup dengan perintah

Dan taraaaa…

Sekian tulisan dari saya, semoga bermafaat.

Kode yang digunakan dalam tutorial ini diambil dari repository https://github.com/mazipan/ng2-starwars dan bisa dilihat demo nya di : http://mazipan.github.io/ng2-starwars/.

Silahkan dipelajari source code nya.

Ditulis oleh Irfan Maulana.

Salam.