Estoy tratando de configurar diferentes archivos de entorno en un proyecto React (usando create-react-app). Sigo la documentación oficial pero recibo un error:
'.env.development' no se reconoce como un comando interno o externo,
Tengo .env , .env.local , .env.development , .env.production en el mismo nivel que package.json y src/
Mis scripts en package.json :
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, También probé otra opción: "start": ".env.local, .env.development, .env" .
Ambos devuelven errores similares a los mencionados anteriormente cuando ejecuto npm start .
Todas mis claves comienzan con el prefijo: REACT_APP_. Ej: REACT_APP_API_KEY .
¿Qué me estoy perdiendo?
Creo que debe usar el paquete env-cmd para usar múltiples env. Cuál es la mejor manera de manejarlo. Simplemente siga este documento para obtener más información Ejemplo de env múltiple para detalles del paquete reaccionar y env-Cmd
Además, verifique qué versión de react/ react-scripts está utilizando en su proyecto y verifique la versión de react/react-scripts que ha creado para una demostración que funcione bien para usted.
Estos son los archivos env que puede usar y su prioridad (disponible con react-scripts@1.0.0 y superior):
.env: predeterminado.
.env.local: anulaciones locales. Este archivo se carga para todos los entornos, excepto para la prueba.
.env.development,.env.test,.env.production: configuración específica del entorno.
.env.development.local,.env.test.local,.env.production.local: anulaciones locales de configuraciones específicas del entorno.
Lo que significa que una variable de entorno para la production va en el archivo .env.production , etc. Y estos son los pasos a seguir:
Cree su archivo .env o .env.production ... en el directorio raíz del proyecto, la misma carpeta donde se encuentra package.json .
Defina su variable de entorno con el prefijo REACT_APP_ dentro de esos archivos env, así:
REACT_APP_API_KEY=343535345235452452
- En un archivo JavaScript:
process.env.REACT_APP_API_KEY
- En un archivo HTML:
<title>%REACT_APP_API_KEY%</title>
Aunque si desea establecer una variable de entorno dentro de los scripts , puede hacerlo así:
"scripts": { "start": "REACT_APP_API_KEY=343535345235452452 react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },