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