Setelah searching dan browsing kesana-kemari, akhirnya bisa juga setup .env di react tanpa menambahkan library lain. Karena, mulai dari react-scripts@0.2.3 sudah termasuk library dotenv, jadi kita tidak perlu menambah dotenv lagi di devDependencies-nya package.json.
Gas Code!
Disini, saya asumsikan kita telah membuat sebuah project react. Disini saya menggunakan project react yang dibuat dengan menggunakan create-react-app. Pertama-tama kita cek terlebih dahulu, apakah di dalam file package.json sudah ada library react-script atau belum. Jika belum, silahkan tambah terlebih dahulu.
{ "name": "sample-dotenv", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.0", "web-vitals": "^0.2.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
Untuk menambahkan library javascript, kita bisa menggunakan npm (Node Package Manager), ataupun yarn.
Jangan lupa juga periksa, apakah versi react-script sudah versi 0.2.3 keatas atau belum. Jika belum silahkan upgrade versinya terlebih dahulu.
Setelah semua pas, kita buat file .env-nya sob. Tinggal buat di root project react kita. Lalu isi dengan variable-variable environment yang akan kita pakai. .env merupakan perintah shell untuk keluarga Unix yang digunakan untuk me-list variable-variable environment tanpa harus mengubah environment yang sudah ada. Source: Wikipedia.
Perlu diperhatikan, agar variable-variable dalam file .env kita bisa terbaca ketika dipanggil, kita perlu menambahkan prefiks REACT_APP_ pada nama variable kita. Misal disini saya ingin membuat variable BASE_API_URL, maka agar bisa terbaca, kita perlu menambahkan prefix REACT_APP_, menjadi REACT_APP_BASE_API_URL.
REACT_APP_BASE_API_URL=https://apis.husnikamal.com
Untuk pemanggilannya cukup sederhana, hanya dengan proces.env.{{nama_variablenya}}.
await fetch(`${process.env.REACT_APP_BASE_API_URL}/api/helloWorld`, { method: "GET", headers: { Authorization: BearerToken, } });
Semoga bermanfaat! ~Nuhuns.
Referensi:
- Stack Overflow: Is it possible to use dotenv in a react project?
- Wikipedia: env
