Configurar el entorno es una parte fundamental a la hora de editar código en cualquier proyecto de programación. Esta parte nos permite simplificar acciones y automatizar decisiones para que la escritura de código sea más eficiente. En este post, te enseñaremos cómo usar el archivo env en React para configurar nuestro entorno con las variables de entorno React.
Un poco de contexto antes del archivo env
En nuestro post sobre traer contenido de un API en React, te hemos mencionado que una de las cosas que puedes hacer para preparar tu código es evitar que los enlaces localhost se vean de manera directa en nuestro código. Para ello, utilizamos las variables de entorno que podemos configurar en el archivo env en React. A continuación, te enseñamos exactamente qué es este archivo env y cómo funciona.
¿Qué es el archivo env en React?
Un archivo env en React es un tipo de archivo al que tenemos acceso con las aplicaciones creadas con create-react-app. Este tipo de archivo nos permite configurar nuestro entorno para facilitar algunas prácticas a la hora de escribir código con las variables de entorno React.
Entonces, ¿donde creamos nuestro archivo env en React para configurar nuestro entorno? Pues si estás familiarizado con el código de una aplicación creada con create-react- app, sabrás que existe una carpeta src que maneja todos nuestros recursos fuente. Ya que un archivo .env en React manejará nuestro proyecto, deberemos crearlo fuera de esta carpeta, en el nivel más alto de nuestro proyecto con las variables de entorno en React.
¿Cómo funciona el archivo env en React?
En un archivo env en React podemos determinar una serie de variables de entorno, también conocidas como environment variables. Una de ellas nos permite definir que todo lo que metamos en el archivo que empiece por REACT_APP_ tenga un acceso más sencillo. Entonces, podemos crear una variable que se llame API_BASE_URL para acceder de manera más simple a la URL base de nuestra API. Esto hará que podamos acceder a las secciones de esta URL sin insertar el enlace a nuestro localhost: cada vez con nuestro archivo env React.
REACT_APP_API_BASE_URL = http://localhost:8000
Ten en cuenta que, cada vez que crees una nueva variable de entorno en tu archivo env en React, deberás reiniciar el proyecto. Para ello, deberás ir a tu terminal y detener el proyecto. Luego, usarás el comando npm start para inicializarlo de nuevo y así tener las variables de entorno en React.
Al arrancar de nuevo, create-react-app lee el archivo env React e inyecta dentro de nuestro entorno de desarrollo la clave:valor que hemos determinado para nuestras variables de entorno React.. En nuestro caso, esta nos guía al enlace base de nuestra API. Esto quiere decir que podemos acceder a REACT_APP_API_BASE_URL para acceder a nuestro enlace de env React. Esto, además, será leído en términos de JavaScript cuando hagamos el build de nuestra aplicación en el proceso de producción.
¿Qué sigue?
Ahora que sabes qué es el archivo .env en React y cómo utilizarlo para configurar proyectos para las variables de entorno en React, ¡es el momento de crear tus propias aplicaciones en esta librería de JavaScript! Para aprender más sobre la creación de proyectos de programación para la web, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, en donde aprenderás a desarrollar con lenguajes como JavaScript, JSX, CSS y HTML. ¿A qué esperas para empezar? ¡Inscríbete ya y conviértete en un experto!
