Husni Kamal
Crash Team Racing Pro Player (Drift). Blue fire addict. Had beaten Oxide and Emperor Velo XXVII in some time trial track. Tetris Pro Player. Rank #2 in Bandung.

Setup .env di React

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:

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *