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:
- Pake HtmlWebpackPlugin untuk injeksi file
dev.env.js
atau prod.env.js
ke file HTML dalam bentuk tag <script>
- 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>
.
- 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 →