react env
3.1.0
Popa su entorno desde archivos .env en tiempo de ejecución en lugar de tiempo de compilación .
.env . Este paquete genera un archivo __ENV.js a partir de múltiples archivos .env que contiene variables de entorno de lista blanca que tienen un prefijo REACT_APP_ .
< script src =" /public/__ENV.js " /> En el navegador, sus variables estarán disponibles en window.__ENV.REACT_APP_FOO y en el process.env.REACT_APP_FOO del servidor.env.react_app_foo. Hemos incluido una función de ayuda para facilitar la recuperación de un valor:
# .env
REACT_APP_NEXT= " Next.js "
REACT_APP_CRA= " Create React App "
REACT_APP_NOT_SECRET_CODE= " 1234 "se convierte en ...
import env from "@beam-australia/react-env" ;
export default ( props ) => (
< div >
< small >
Works in the browser: < b > { env ( "CRA" ) } </ b > .
</ small >
< small >
Also works for server side rendering: < b > { env ( "NEXT" ) } </ b > .
</ small >
< form >
< input type = "hidden" defaultValue = { env ( "NOT_SECRET_CODE" ) } />
</ form >
< small >
Entire safe environment:
< pre >
< code > { { JSON . stringify ( env ( ) ) } } </ code >
</ pre >
</ small >
</ div >
) ;Hemos implementado algunos valores predeterminados sensatos que tienen el siguiente orden de prioridad:
{path-to-file} // from the --path, -p argument.env.{key} // from the --env, -e argument.env.local.env Su configuración está disponible en el navegador y el process.env . Le sugerimos que agregue .env.local a .gitignore .
Los marcos, como el siguiente, permiten algunos valores predeterminados agradables como .env.local, .env.production, .env . Esto tiene la limitación en la que es posible que desee ejecutar su aplicación en diferentes entornos, como "puesta en escena, integración, QA", pero aún construir una aplicación de "producción" con NODE_ENV=production . Con react-env esto es posible:
# .env.staging
REACT_APP_API_HOST= " api.staging.com "
# .env.production
REACT_APP_API_HOST= " api.production.com "
# .env.qa
REACT_APP_API_HOST= " api.qa.com "
# .env.integration
REACT_APP_API_HOST= " api.integration.com "
# .env.local
REACT_APP_API_HOST= " api.example.dev "
# .env
REACT_APP_API_HOST= " localhost " Para la puesta en escena, simplemente establecería APP_ENV=staging donde ejecuta su aplicación:
{
...
"scripts": {
"start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
}
...
}
Así REACT_APP_API_HOST=api.staging.com en su entorno de puesta en escena.
Tenga en cuenta que debe pasar el nombre de una variable de entorno a
--env, no su valor.
- ✔ Uso válido (macOS):
APP_ENV=staging react-env --env APP_ENV -- next start- Error común:
react-env --env staging -- next start
También puede especificar la ruta a un archivo ENV específico:
{
...
"scripts": {
"start": "react-env --path config/.env.defaults -- next start"
}
...
}
Puede usar cualquier combinación de estos dos argumentos junto con el valor predeterminado .env, .env.local para construir su configuración de tiempo de ejecución.
También puede especificar el prefijo de las variables de entorno cotizadas en blanco:
{
...
"scripts": {
"start": "react-env --prefix NEXT_APP -- next start"
}
...
}
# .env
NEXT_APP_NEXT= " Next.js "
NEXT_APP_CRA= " Create React App "
NEXT_APP_NOT_SECRET_CODE= " 1234 " Debe agregar REACT_ENV_PREFIX env variable antes del comando jest si usa env() durante sus pruebas:
{
...
"scripts": {
"test": "REACT_ENV_PREFIX=NEXT_APP jest --maxWorkers=3"
}
...
}
Es posible utilizar este paquete como un script ENTRYPOINT dentro de un DockerFile. Esto generará su archivo de configuración __ENV.js cuando el contenedor bote y permitirá que sus scripts package.json permanezcan sin cambios. Por supuesto, node binario debe estar presente en su contenedor.
FROM node:alpine
ENTRYPOINT yarn react-env --env APP_ENV
CMD yarn start$ react-env < args > -- < command ><command> Puede pasar un comando, como un archivo de entrada NodeJS a la herramienta react-env cli. Por ejemplo react-scripts , next dev , next start
--env , -e (predeterminado: nulo) Especifique el nombre de una variable de entorno existente, cuyo valor es el nombre de un entorno que desea, para hacer que React-ANV analice un entorno de envío específico del entorno. Por ejemplo, puede establecer APP_ENV=staging primero y luego aplicar --env APP_ENV indicador. react-envían cargaría .env.staging, .env.local, .env en ese orden con este último teniendo prioridad.
--path , -p (predeterminado: NULL) Especifique un archivo ENV específico para cargar EG react-env --path .env.testing cargaría .env.testing, .env.local, .env en ese orden con este último teniendo prioridad. Una combinación de --env APP_ENV --path testing Where APP_ENV=staging COMBAS .env.testing, .env.staging, .env.local, .env como orden de prioridad.
--dest , -d (predeterminado: ./public) Cambie el destino predeterminado para generar el archivo __ENV.js .
--prefix (predeterminado: react_app) Cambie el prefijo predeterminado para las variables ENV de la lista blanca. Para Exemple react-env --prefix CUSTOM_PREFIX Will White-List Variables como: CUSTOM_PREFIX_PUBLIC_KEY=my-public-key
--debug (predeterminado: falso) Habilitar la depuración para React-Env. Esto registrará las variables de entorno del navegador cargado en su consola cuando ejecute react-env --debug
Como un cambio de ruptura significativo, hemos eliminado la capacidad de especificar archivos específicos a través del argumento --env . Este argumento ahora especifica que el archivo de entorno se analiza según el entorno de ejecución. Por ejemplo --env APP_ENV o -e APP_ENV DONDE APP_ENV=staging se lee en .env.staging . Es muy común que las plataformas tengan entornos staging, qa, integration que aún están integrados en modo "producción" con NODE_ENV=production . Esto permite que USECase y muchos otros.
-Todavía puede especificar archivos a través del argumento --path, -p .
También hemos retirado la adición de NODE_ENV por defecto, ya que este era un riesgo de seguridad.
El archivo ahora se llama __ENV.js
El comando Depandand ahora está en el formato react-env <args> -- <command>
