Categorii
Programare

Cum citești variabile de mediu din fișier cu Razzle și React?

Cum citești variabile de mediu din fișier? Simplu.

Dar ce sunt fișierele cu variabile de mediu?

Sunt fișiere .env care conțin comentarii care încep cu #, și perechi X=Y unde X este numele unei variabile de mediu și Y este valoarea pe care o primește. Au avantajul că poți ține mai multe configurații pentru diferite contexte de utilizare și parolele sau alte date sensibile nu apar în lista de procese a sistemului de operare dacă se folosește acest tip de fișiere. Este ușor să pui fișierele de tip .env în .gitignore.

Cu ce se citesc variabilele de mediu din fișier?

Cu editor de text, cu bash, fish, cu orice program, inclusiv cu pachet NPM.

Și ce legătură are React cu aceste variabile de mediu?

Nu toate variabilele de mediu sunt utile dar se întâmplă uneori ca una să fie utilă, de exemplu crearea de URL-uri absolute la resurse folosite dintr-o componentă React are nevoie de URL-ul de bază care se schimbă la trecerea din modul de dezvoltare înspre modul de construcție-publicare și este pus în PUBLIC_PATH în Razzle pentru modul de producție.

Dar Razzle? Ce este?

Razzle permite să lucrezi pe server și pe client în același timp, cu detectarea automată a fișierelor modificate și recompilarea acestora. Folosește 2 instanțe WebPack în spate care rulează în paralel pentru server și, respectiv, client.

Povestea: citește variabile din fișier în Razzle

  1. Creează un proiect Razzle cu React.
  2. Configurează în fișierul .env nou sau existent variabila de mediu PUBLIC_PATH, variabilă care este folosită de comanda razzle build care e parte din comanda npm start.
  3. Încearcă să folosești process.env.PUBLIC_PATH (sintaxă Node.js) într-o componentă.
  4. Nu reușești fiindcă process există doar în context Node.js.
  5. Înainte de a te da bătut, în codul de randare (React) pe server, incorporează un element <script> ce conține variabila din .env pe care suntem interesați în a o pune în obiectul window.env (care este echivalentul lui process.env în browser, convențional).
  6. Vezi că nu funcționează dar ești perseverent/ă și continui chiar dacă în codul de randare pe server nu s-a putut citi variabila de mediu și window.env este gol sau chiar nedefinit.
  7. Folosește acum pachetul cu numele dotenv pe care îl poți instala cu npm i --save dotenv . Acest pachet se folosește simplu:
import { config } from 'dotenv';
[...]
config({ path: '.env' }); // sau '../../.env'
  1. Apelul din cod de mai sus la funcția config din pachetul dotenv trebuie făcut înainte de a se utiliza, în cazul din acest articol process.env.PUBLIC_PATH.
  2. În mod general, apelul la oricare funcție precum config trebuie pus după toate instrucțiunile import din fișier.

Dacă aveți întrebări, corecții, sugestii (inclusiv pentru articole noi), nu ezitați să scrieți comentarii mai jos.

Toate gândurile bune!

0 0 voturi
Article Rating
Abonare
Anunță la
guest
2 Comments
Cele mai vechi
Cele mai noi Cele mai votate
Feedback-uri inline
Vezi toate comentariile
Alex
Alex
1 an în urmă cu

Te salut, draga Silviu! Foarte frumos ai explicat. Multumesc pentru postare. Ganduri pozitive si o zi minunata sa ai!