Accesso alle variabili d'ambiente React su Netlify

Hai appena completato lo sviluppo della tua ultima applicazione React e sei pronto per condividerlo con il resto del mondo. L'unica cosa rimasta sulla tua strada è la distribuzione dell'applicazione. Ci sono dozzine di modi per farlo, ma questo articolo ti guiderà su come ospitare la tua applicazione su Netlify e su come configurare correttamente le variabili d'ambiente frontend.

Cos'è una variabile d'ambiente?

Le variabili d'ambiente sono variabili definite al di fuori del programma e sono costituite da una coppia nome / valore. È quindi possibile fare riferimento al nome della variabile in qualsiasi punto del codice per accedere al suo valore.

Prerequisiti

• Installa il react-dotenvpacchetto npm
• La tua applicazione è sincronizzata correttamente con un repository Github
• Hai un account Netlify

Vai avanti e accedi al tuo account Netlify, quindi vai alla scheda Panoramica squadra . Fare clic sul pulsante per aggiungere un nuovo sito da Git . Seleziona GitHub dai provider disponibili e questo dovrebbe chiederti di consentire a GitHub di accedere alle tue credenziali. Una volta effettuato l'accesso, puoi cercare il tuo repository, selezionare il ramo da distribuire e configurare le impostazioni di build. Per ora, possiamo lasciare le impostazioni di build da sole e fare clic su Distribuisci sito , ma torneremo su questo un po 'più tardi una volta che avremo configurato correttamente react-dotenvnella nostra applicazione.

Configura la libreria 'react-dotenv' nella tua applicazione React

Con react-dotenvinstallato, andiamo nel package.jsonfile e apportiamo le seguenti modifiche. La "scripts"chiave dovrebbe includere react-dotenvcome parte dei comandi "start"e "build", come mostrato di seguito:

"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"
]
}

Crea dinamicamente il .envfile

Dal momento che non inviamo mai il nostro .envfile al nostro repository GitHub, possiamo scrivere un piccolo script che genererà questo file quando Netlify distribuirà la nostra build. Per questo script, useremo la writeFileSync()funzione JavaScript dalla fslibreria, che assomiglia a questa:

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)

Configurare le impostazioni del sito Netlify

Successivamente, accediamo al nostro account Netlify e andiamo alla scheda Impostazioni sito per il nostro nuovo sito. In Build & Deploy> Environment , possiamo specificare le variabili d'ambiente che vorremmo usare nel nostro programma, che dovrebbe assomigliare a questo:

Questo è l'unico posto in cui dovremmo specificare i valori effettivi delle nostre variabili d'ambiente. Successivamente, dobbiamo dire a Netlify di generare il nostro .envfile eseguendo il nostro script personalizzato:

Sommario

Grande! Con tutto configurato, andiamo alla scheda Deploy e attiviamo un nuovo deploy per la nostra applicazione. Il comando build dovrebbe generare un .envfile, che definirà le nostre variabili d'ambiente con i valori che abbiamo specificato in Netlify, permettendoci di accedere ai loro valori importando la .react-dotenvlibreria nei nostri componenti. Buona programmazione!