Cara Membaca Environment Variable ReactJs yang dibuat Menggunakan Vite

Persiapan

• Projek React sudah siap, maksudnya projek React dibuat menggunakan vite.

Tujuan

• Membaca variable agar saat projek live di production, variable diisi dengan nilai yang kita simpan di file .env.production.

Langkah-langkah Membaca Environment Variable

• Buat file .env.production

VITE_WEBSITE_HOST=https://lukmanlab.com/
NODE_ENV=production

• Panggil didalam komponen

export default function LatestArticles() {
  const host = import.meta.env.VITE_WEBSITE_HOST;

  return (
    <div>{host}</div>
  );
}

• Build projek, disini karena saya pakai yarn maka:

yarn build

Jika menggunakan npm, silahkan coba npm build.