Archivo env en React

Autor: | Última modificación: 9 de septiembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

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.

Un poco de contexto

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 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.

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.

¿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.

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.

Al arrancar de nuevo, create-react-app lee el archivo env e inyecta dentro de nuestro entorno de desarrollo la clave:valor que hemos determinado. 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. 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, ¡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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!