Mengakses Variabel Lingkungan React di Netlify

Anda baru saja menyelesaikan pengembangan aplikasi React terbaru Anda, dan Anda siap untuk membagikannya ke seluruh dunia. Satu-satunya hal yang menghalangi Anda adalah menerapkan aplikasi. Ada banyak cara untuk melakukannya, tetapi artikel ini akan memandu Anda tentang cara menghosting aplikasi Anda di Netlify, serta cara mengonfigurasi Variabel Lingkungan frontend dengan benar.

Apa itu Variabel Lingkungan?

Variabel Lingkungan adalah variabel yang ditentukan di luar program Anda dan terdiri dari pasangan nama / nilai. Anda kemudian dapat mereferensikan nama variabel di mana saja di kode Anda untuk mengakses nilainya.

Prasyarat

• Instal react-dotenvpaket npm
• Aplikasi Anda disinkronkan dengan benar ke repositori Github
• Anda memiliki akun Netlify

Silakan masuk ke akun Netlify Anda, lalu buka tab Ikhtisar Tim . Klik pada tombol untuk menambahkan situs baru dari Git . Pilih GitHub dari penyedia yang tersedia, dan ini akan meminta Anda untuk mengizinkan GitHub mengakses kredensial Anda. Setelah masuk, Anda dapat mencari repositori Anda, memilih cabang yang akan diterapkan, dan mengkonfigurasi pengaturan build. Untuk saat ini, kita dapat membiarkan pengaturan build dan mengklik Deploy site , tetapi kita akan kembali ke ini nanti setelah kita mengonfigurasi dengan benar react-dotenvdi aplikasi kita.

Konfigurasikan pustaka 'react-dotenv' di aplikasi React Anda

Setelah react-dotenvterinstal, mari masuk ke package.jsonfile dan lakukan pengeditan berikut. The "scripts"kunci harus mencakup react-dotenvsebagai bagian dari "start"dan "build"perintah, seperti yang ditunjukkan di bawah ini:

"scripts": {
"start": "react-dotenv && react-scripts start",
"build": "react-dotenv && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

"react-dotenv": {
"whitelist": [
"ENV_VAR_1",
"ENV_VAR_2"
]
}

Buat .envfile secara dinamis

Karena kita tidak pernah memasukkan .envfile kita ke repositori GitHub, kita dapat menulis skrip kecil yang akan menghasilkan file ini ketika Netlify menerapkan build kita. Untuk skrip ini, kami akan menggunakan writeFileSync()fungsi JavaScript dari fsperpustakaan, yang terlihat seperti ini:

const fs = require('fs')
const path = `./.env`
const vars = `
 ENV_VAR_1=${process.env.ENV_VAR_1_NETLIFY}\n
 ENV_VAR_2=${process.env.ENV_VAR_2_NETLIFY}
`
fs.writeFileSync(path, vars)

Konfigurasikan Pengaturan Situs Netlify

Selanjutnya, mari masuk ke akun Netlify kami dan arahkan ke tab Pengaturan Situs untuk situs baru kami. Di bawah Build & Deploy> Environment , kita dapat menentukan Variabel Lingkungan yang ingin kita gunakan dalam program kita, yang akan terlihat seperti ini:

Ini adalah satu-satunya tempat kita harus menentukan nilai aktual Variabel Lingkungan kita. Selanjutnya, kita perlu memberi tahu Netlify untuk membuat .envfile kita dengan menjalankan skrip kustom kita:

Ringkasan

Bagus! Dengan semua yang dikonfigurasi, mari pergi ke tab Deploy dan memicu penerapan baru untuk aplikasi kita. Perintah build harus menghasilkan .envfile, yang akan menentukan variabel lingkungan kita dengan nilai yang telah kita tentukan di Netlify, memungkinkan kita untuk mengakses nilainya dengan mengimpor .react-dotenvpustaka di komponen kita. Selamat membuat kode!