Publicada:

React - Acceda a las variables de entorno desde dotenv (.env)

Este es un tutorial rápido sobre cómo crear y acceder a variables de entorno en React con un archivo dotenv (.env).

Las aplicaciones React creadas con Create React App admiten variables de entorno dotenv listas para usar, por lo que todo lo que necesita hacer es agregar un archivo .env a la carpeta raíz de tu proyecto React.

Para generar un proyecto React con Create React App ejecute el comando npx create-react-app <nombre del proyecto>, la herramienta también se usa para construir y servir la aplicación. Para obtener más información sobre Create React App, consulta https://create-react-app.dev/.


Cómo hacer que las variables env sean accesibles para la aplicación cliente de React

Solo debe recordar una cosa: para acceder a las variables de entorno desde la aplicación del cliente, deben tener el prefijo REACT_APP_. De lo contrario, solo serán accesibles desde el lado del servidor.

Puede acceder a las variables de entorno (con el prefijo REACT_APP_) desde su aplicación React a través del objeto process.env. de Node.js. Por ejemplo const myVar = process.env.REACT_APP_MY_VAR;.


Ejemplo de variable React env en StackBlitz

Aquí hay una aplicación React de ejemplo que contiene un par de variables de entorno. Muestra que la variable env con el prefijo REACT_APP_ es accesible para el componente de la aplicación y la variable del lado del servidor no lo es.

(Ver en StackBlitz en https://stackblitz.com/edit/react-access-environment-variables-from-dotenv)

 

Ejemplo de archivo dotenv (.env)

El archivo dotenv de la aplicación de ejemplo. Define dos variables de entorno, la que tiene el prefijo REACT_APP_ es accesible para la aplicación cliente de React, y la que no tiene el prefijo solo es accesible para el código del lado del servidor.

# variables prefixed with REACT_APP_ are accessible from the react client app
REACT_APP_MY_ENV_VARIABLE=environemnt variable value from .env file

# variables without the REACT_APP_ prefix are NOT accessible from the react client app
SERVER_SIDE_ONLY_VAR=this can't be accessed on the client
 

Componente de la aplicación React

El componente App intenta mostrar ambas variables de entorno, pero solo tiene acceso a la que tiene el prefijo REACT_APP_.

Accede a variables en el archivo .env con el objeto Node.js process.env.

export default function App() {
    return (
        <div class="card m-3">
            <h5 class="card-header">React - Access Environment Variables from dotenv (.env)</h5>
            <div class="card-body">
                <p>REACT_APP_MY_ENV_VARIABLE: {process.env.REACT_APP_MY_ENV_VARIABLE}</p>
                <p>SERVER_SIDE_ONLY_VAR: {process.env.SERVER_SIDE_ONLY_VAR}</p>
            </div>
        </div>
    );
}
 

Para obtener más información sobre el uso de variables de entorno en una aplicación React creada con Create React App, consulte https://create-react-app.dev/docs/adding-custom-environment-variables/.

 


Suscríbete o Sígueme para actualizaciones

Suscríbete a mi canal de YouTube o sígueme en Twitter, Facebook o GitHub para recibir notificaciones cuando publique contenido nuevo.

Aparte de la codificación...

Actualmente estoy intentando viajar por Australia en motocicleta con mi esposa Tina en un par de Royal Enfield Himalayan. Puedes seguir nuestras aventuras en YouTube, Instagram y Facebook.


¿Necesita Ayuda React?

Buscar fiverr para encontrar ayuda rápidamente de desarrolladores React experimentados.