Variables de entorno en proyectos React

Las aplicaciones web modernas hacen un uso intensivo de varios tipos de API. Para que funcionen, necesitan claves o alguna otra información para identificar y rastrear cada uso de API. Mantener las claves de API es una de las muchas aplicaciones de las variables de entorno. En general, su propósito principal es almacenar credenciales esenciales para el desarrollo web. También brinda a los desarrolladores de aplicaciones un espacio único para ajustar los datos de configuración cuando sea necesario. De esta manera, no es necesario buscar y editar cada instancia de datos de configuración manualmente.

Al principio, las variables de entorno de React pueden ser confusas, especialmente para aquellos que no tienen una experiencia de back-end. Sin embargo, los desarrolladores que pretendan trabajar en aplicaciones a gran escala deben familiarizarse con las variables de entorno.

Reglas para las variables de entorno de React

Tenga en cuenta que los valores almacenados en las variables de entorno no son privados. Por ejemplo, no son prácticos para almacenar claves API secretas. Una vez que se implemente su aplicación, los valores de las variables de entorno serán visibles en el código fuente. Cada vez que agrega una variable de entorno, debe reiniciar su aplicación antes de hacer referencia al valor almacenado en ellas.

Variables de entorno en create-react-app

Los proyectos de React construidos con create-react-app con la versión de react-scripts @0.5.0 o superior soportan variables de entorno, por lo que no se necesita ningún paquete externo.

Siempre que haya instalado la última versión del paquete create-react-app, todo lo que necesita hacer es crear un archivo .env.local en el directorio principal (la misma carpeta que incluye README.md,package.json y otros archivos) y utilícelo para definir las variables. He aquí un ejemplo:

REACT_APP_CREDENTIAL_DATA = 'some-credential-data'

La extensión .env.local es necesaria para garantizar que el archivo se agrega automáticamente al archivo .gitignore cuando se inicializa el proyecto.

Para utilizar el soporte integrado de create-react-app para las variables de entorno, debe anteponer los nombres de las variables con REACT_APP.

Variables de entorno sin create-react-app

Si tiene un entorno React personalizado sin react-scripts, necesitará instalar un paquete externo para usar variables de entorno en React.

Con este fin, puede instalar un popular dotenv paquete creado específicamente para este propósito.

Primero, debe abrir la línea de comando en la carpeta del proyecto e instalar este paquete:

npm install dotenv

Luego, debe hacer que esté disponible y configurar los ajustes. Agrega el siguiente código a la aplicación:

require('dotenv').config()

Una vez hecho esto, puede crear un archivo .env.local en la carpeta, tal como lo haría para las aplicaciones creadas con create-react-app. También debe comenzar los nombres de las variables con el prefijo REACT_APP.