React + Vite Curso #29 Variables de entorno

En el curso #29 de React + Vite, aprenderemos sobre el uso de Variables de entorno en nuestras aplicaciones. Las variables de entorno nos permiten administrar de forma segura los valores sensibles de nuestras aplicaciones, como claves de API, tokens de acceso, o cualquier otra información confidencial.

Configuración de Variables de Entorno

En React + Vite, podemos configurar variables de entorno utilizando un archivo .env. Esto nos permite tener diferentes valores para cada entorno de nuestra aplicación, como desarrollo, pruebas, y producción.

Para definir una variable de entorno, simplemente creamos un archivo llamado .env en la raíz de nuestro proyecto, y agregamos las variables que necesitamos:

REACT_APP_API_KEY=abcdefgh1234567890
REACT_APP_API_URL=https://api.example.com
    

Acceso a las Variables de Entorno

En nuestra aplicación React, podemos acceder a las variables de entorno utilizando la sintaxis process.env.VARIABLE_NAME. Por ejemplo, para acceder a la clave de API definida en nuestro archivo .env, podemos hacer lo siguiente:

const apiKey = process.env.REACT_APP_API_KEY;
    

Uso en Vite

En el entorno de desarrollo con Vite, las variables de entorno definidas en el archivo .env se cargan automáticamente. Sin embargo, en producción, necesitamos asegurarnos de que estas variables estén disponibles durante la compilación. Para ello, podemos utilizar un plugin como dotenv para cargar las variables de entorno en nuestro código.

Conclusion

El uso de variables de entorno en nuestras aplicaciones React + Vite nos permite administrar de forma segura la información confidencial, y nos proporciona una manera sencilla de configurar nuestro entorno de desarrollo, pruebas y producción. Con la configuración adecuada, podemos mantener nuestros valores sensibles protegidos y accesibles según sea necesario.