Cómo configurar y usar variables de entorno en la aplicación React

Las variables de entorno nos ayudan a usar diferentes configuraciones en nuestra aplicación de reacción. Por ejemplo, podemos usar diferentes API para el desarrollo y diferentes API para la producción sin cambiar la aplicación completa cada vez u ocultar la funcionalidad que aún no está lista para la producción.

Índice
  1. Configuración de variables de entorno
  2. Acceso a variables de entorno

Configuración de variables de entorno

Para configurar las variables de entorno, primero necesitamos crear un archivo .env archivo en la carpeta raíz de nuestra aplicación React.

Ahora podemos establecer variables de entorno dentro de este archivo usando REACT_APP_.VARIABLE_NAME=VALUE.

.env

REACT_APP_.BASE_URL=https://google.com

Nota: No participar .env archivo en su repositorio público de GitHub, si tiene secretos almacenados como API_KEY o contraseñas.

Acceso a variables de entorno

En nuestros componentes de la aplicación de reacción, podemos acceder a las variables de entorno usando process.env.REACT_APP_.BASE_URL.

Aplicación.js

import React from "react";

export default function App(){
   return (
      <div>
        <a href={process.REACT_APP_.BASE_URL}>My app</a>      </div>
   )
}

En el interior de public/index.html file, podemos acceder a variables de entorno como esta.

índice.html

<base href="%REACT_APP_BASE_URL%">

Las variables de entorno se inyectan en la aplicación en el momento de la compilación.

Si quieres conocer otros artículos parecidos a Cómo configurar y usar variables de entorno en la aplicación React puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas