Monday, August 27, 2018

Setting Environment Variable React, DevOps Style

Dalam metodologi 12 factor App, ada Dev/Prod Varity. Environment dev hingga prod dibuat sepersis mungkin, dengan goals continous development. Cara kita yang sekarang, yaitu perbedaan kode antara file constant di branch development dan branch master kurang sesuai dengan factor ini. Bagaimana jika ada perbedaan url back end ? enviroment variabel come to the rescue

Ok, untuk blog kali ini akan membahas hal kecil tapi fundamental untuk setiap project. Environment Variables. Sama seperti di OS, environment variabel ini menyimpan variabel dengan nilai tertentu yang nilai nya tidak bergantung dengan aplikasi, tetapi pada mesin dimana aplikasi itu berjalan

Sebenarnya masalah ini tidak besar, namun sangat mengganggu proses continous development. Saat merge antara branch development dan master, url back end master malah mengarah ke development, atau mungkin bisa jadi sebaliknya.

Cara yang paling populer dan diimplementasikan di berbagai framework dan bahasa adalah dotenv. Fortunately, create-react-app minimal 1.0.0 sudah support dotenv dengan syarat dan ketentuan :
  • Variabel disimpan dalam .env pada root project
 

  • Hanya variabel dengan prefix REACT_APP_ yang bisa diimport
 
  • Hasil import bisa diakses dengan nilai process.env
 

dotenv done. Masalah selanjutnya adalah, .env ini di ignore oleh git secara best practicenya. jadi tidak ikut naik ke server. Selain itu, server kita juga hanya menerima artifact hasil build, bukan source code sebenarnya, maka harus diakalin. How ?

Buat .env di setiap environment di server. Nah, di server kita akan buat 3 file, dev.env, stg.env, prod.env. Lalu di setiap jenkins kita buat command untuk copy dan rename file sesuai servernya, contoh untuk dev


Voila, done. Setiap running maka akan ada .env sesuai server yang berjalan, dengan begini source code dev dan prod sama. Continous development checked.


Mari kita revolusi cara ngoding kita dengan cara meng automasi hal-hal (baca: cara males), Keep Coding, Keep Learning, Keep Contributing