Cara Mudah Pakai Environment Variable dengan Webpack

Misalnya kita punya project web dengan konfigurasi environment yang beda antara dev & production (seperti normalnya projek web) kayak gini:

DEV PRODUCTION
DB 192.168.0.99 192.168.0.100
Assets dev.assets.com live.assets.com
API server1.api.com server2.api.com

Ada beberapa cara untuk pake variabel-variabel itu di aplikasi kita antara lain:

  1. Pake HtmlWebpackPlugin untuk injeksi file dev.env.js atau prod.env.js ke file HTML dalam bentuk tag <script>
  2. Bikin satu file env.js yang isinya bisa dev atau production vars tergantung di direktori mana dia dibuat. File ini nanti dimuat oleh aplikasi pake <script>.
  3. Ada juga yang pake JSON.

Untuk projek yang pake ES6 & Webpack, ada cara yang menurut saya lebih sip. Intinya environment vars kita bikin sebagai modul ES6, jadi bisa diimpor kayak modul ES6 biasa.

Kita bikin dua file, satu untuk masing-masing env:

//file: dev.env.js
export default {
    type:'dev',
    db:'192.168.0.99',
    assets:'dev.assets.com',
    api:'server1.api.com'
}

Satu lagi untuk production:

//file: production.env.js
export default {
    type:'production',
    db:'192.168.0.100',
    assets:'live.assets.com',
    api:'server2.api.com'
}

Di file index.js & semua file yang butuh baca environment vars:

//file: index.js

//import pake nama alias, jadi modul ini (index)
//nggak perlu tau itu file dev.env.js atau prod.env.js.
import CONFIG from 'env-config';

console.log('CONFIG',CONFIG);

Gimana caranya supaya skrip *.env.js bisa dipake sebagai modul kayak di atas?

Continue reading →

Import & Export Modul dalam ES6

Ekspor / impor modul ES6 memang sedikit bikin bingung. Soale cara ekspornya macem-macem, impornya juga macem-macem. Berikut ini catatan singkat tentang cara ekspor & impor.

Kalo mau nyoba kode2 di bawah, bisa pake Poi.

1. Anonymous default export

//file: src/vehicles/car.js
export default (brand) => (
  {
    brand: brand,
    drive() {
      console.log(this.brand, ' drive');
    }
  }
)

Continue reading →

Bikin Project JavaScript (Webpack) dengan Poi

Yang udah pernah bikin project pake Webpack, Babel, dll. pasti setuju kalo initial setup-nya agak ribet. Kadang rasanya terlalu ribet kalo cuma untuk bikin project-2 kecil.

Ini ada tool namanya Poi yang bisa bantu setup Webpack dkk secara “otomatis”.

Kalo untuk project beneran saya masih lebih sreg pake manual setup. Utamanya karena saya kurang suka kalo ada tambahan layer lagi krn biasanya malah bikin susah. Tapi kalo untuk project kecil buat tutorial atau eksperimen, bolehlah pake Poi.

Instalasi

Karena tujuannya pake Poi buat bantu bikin project, baiknya instal secara global aja.

$ yarn global add poi
#atau
$ npm install -g poi

Continue reading →

Mengenal VueJS – 03

Salah satu fungsi data-binding yang banyak dipake adalah untuk ngerubah stylesheet, bisa yang inline atau pake class. Di bagian ke-3 seri tutorial pengenalan VueJS ini, saya mau bahas tentang CSS dinamis.

Style Binding

Kita pake v-bind:style untuk ngerubah nilai atribut style.

See the Pen VueJS – Dynamic CSS – style binding by Anggie Bratadinata (@masputih) on CodePen.

Ganti warna kotak pake text-input di bawahnya.

Continue reading →

Mengenal VueJS – 02

Ngelanjutin artikel VueJS sebelumnya, kali ini kita bahas sedikit tentang fitur Reactive Programming.

Apa itu Reactive Programming?

RP adalah metodologi pemrograman berbasis event. Ada event, ada reaksi. Jadi kalo Anda punya riwayat sebagai programer Flash/Flex, kayak saya, sebenernya Anda udah pernah nyerempet-nyerempet RP lewat event-based programming yang jadi makanan programer Flash sehari-hari. Bedanya, di RP antara koneksi antara event dispatcher & event listener dibuat abstrak / disembunyiin dibalik interface sederhana. Jadi ga perlu secara eksplisit jalanin addEventListener atau dispatchEvent dsb.

Continue reading →