Post Detail

Environment variable adalah salah satu hal paling penting dalam pembuatan aplikasi karena dengan environment variable kita dipermudah dalam memanggil sebuah global variable dan juga ketika kita set menjadi global maka kita bisa memanggil di semua property class yang ada di vuejs. Kadang hal ini jarang sekali diperhatikan padahal ini adalah salah satu komponen paling penting, contohnya kalo di backend Laravel secara default project ada yang namanya file .env.example nah fungsi file ini sebetulnya adalah untuk mempermudah kita dalam mengkonfigurasi apa saja yang menjadi settingan global. 

Begitupun di vuejs dengan framework js yang sangat populer harusnya sudah ada karena kita butuh contohnya untuk URL API, atau URL ke Payment gateway yang dimana itu harus kita set secara global. Setelah saya amati untuk Environment variable di Vue JS itu ada berbagai cara dan disini karena saya menggunakan Vue dengan Vite sebagai Web Pack nya caranya mudah sekali teman - teman.

1. Buat sebuah file dengan nama .env.development file ini kita akan gunakan untuk development kita atau di local laptop kita lah sebagai programmer. Contoh isian content .env.development adalah sebagai berikut :

NODE_ENV=development
VITE_API_URL = 'http://127.0.0.1:8000/api/'

Nah dengan isian seperti itu maka ketika kita akan memanggil API dalam Class Service API maka kita bisa memanggilnya dengan sangat mudah contoh pemanggilannya menjadi seperti ini :

import axios from 'axios';

const API_URL = import.meta.env.VITE_API_URL+'auth/'

2. Lalu gimana caranya kalo di production, untuk di production kita buat sebuah file .env.example dulu biar ketika ada settingan - settingan yang kiranya butuh di simpan kita simpan di .env.example sehingga file ini bisa kita commit ke github biar nanti di production kita cukup buat sebuah file .env.production dengan content seperti ini.

NODE_ENV=production
VITE_API_URL = 'https://example.com/api/'

yang membedakan nama file dan juga NODE_ENV, dengan seperti itu kita dipermudah ketika ada pergantian API secara menyeluruh kita tinggal ganti di env maka class Vue JS akan ngikutin semua.

Demikianlah artikel pendek ini semoga bermanfaat kalo ada hal - hal yang di tanyakan silahkan tinggalkan di colom komentar.

Thank's