Al estar creando mi aplicaci\u00f3n en React, tuve el problema de estar cambiando la direcci\u00f3n de la API manualmente cuando lo pasaba a modo producci\u00f3n. Honestamente es un poco inc\u00f3modo, as\u00ed que busqu\u00e9 una forma r\u00e1pida de solucionar este problema sin tener que descargar una librer\u00eda. Aclarando un punto, este tutorial se enfoca en el uso de React con el CLI \u201ccreate-react-app\u201d.<\/p>\n
<\/p>\n
El CLI establece la variable global https:\/\/gist.github.com\/Asner\/6eb0e1ba043dae51c44071f1f1f52d4d#file-environment-js<\/p>\n Ahora desde cualquier archivo se puede mandar a llamar desde cualquier archivo de la siguiente manera:<\/p>\n https:\/\/gist.github.com\/Asner\/d374683dd6ee29347aaa2fb879501bec<\/p>\n Ahora al usar Para importar variables de entorno, react-scripts usa la librer\u00eda \u201cdotenv\u201d el cual busca un archivo https:\/\/gist.github.com\/Asner\/4a9381f5440008a6e3f976e1191e9259<\/p>\n Y en el \u201c.env\u201d ponemos:<\/p>\n https:\/\/gist.github.com\/Asner\/20f594822d728a132119245df764d093<\/p>\n \u00bfPor qu\u00e9 las variables inician en https:\/\/gist.github.com\/Asner\/d9d6b4662f62a1c86b4afacaddabf9de<\/p>\n La diferencia entre El orden de prioridad de las variables de entorno es la siguiente:<\/p>\n Al estar creando mi aplicaci\u00f3n en React, tuve el problema de estar cambiando la direcci\u00f3n de la API manualmente cuando lo pasaba a modo producci\u00f3n. Honestamente es un poco inc\u00f3modo, as\u00ed que busqu\u00e9 una forma r\u00e1pida de solucionar este problema sin tener que descargar una librer\u00eda. Aclarando un punto, este tutorial se enfoca en el […]<\/p>\n","protected":false},"author":8,"featured_media":514,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,7,34],"tags":[],"class_list":["post-506","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo","category-desarrollo-de-software-a-la-medida","category-software"],"yoast_head":"\nprocess.env.NODE_ENV<\/code> a development<\/strong> cuando se usa el comando npm start<\/code>, test<\/strong> al usar npm run test<\/code>, o production<\/strong> al usar npm run build<\/code>. Sacando ventaja de esto, dentro de nuestro proyecto podemos crear un simple archivo llamado environment.js<\/code> y ponemos una simple configuraci\u00f3n como la siguiente:<\/p>\nnpm start<\/code>, la variable API_URL ser\u00e1 http:\/\/127.0.0.1:8000\/v1<\/code>, en npm run build<\/code> ser\u00e1 https:\/\/api.production.com\/v1<\/code>. F\u00e1cil, \u00bfno? Sin embargo, esto pudiese llegar a ser tedioso cuando tienes m\u00e1s de diez archivos de servicios que tenga su propio endpoint al api.<\/p>\nM\u00e9todo usando dotenv.<\/h1>\n
.env<\/code> y .env.local<\/code> en la ra\u00edz del proyecto. Para ello creamos estos dos archivos. En el archivo \u201c.env.local\u201d ponemos el siguiente contenido:<\/p>\nREACT_APP_<\/code>? Esto es porque React solo importa aquellas variables que empiezan por ese prefijo. Ahora simplemente en un archivo (en nuestras llamadas a una api) podemos utilizar el objeto process.env<\/code> la siguiente variable para acceder a ella, por ejemplo:<\/p>\n.env<\/code> y .env.local<\/code> es que una se utiliza con los comandos de npm start<\/code> y npm run build<\/code>. Tambi\u00e9n, se pueden usar estos dos archivos al mismo tiempo, solamente .env.local<\/code> sobrescribir\u00eda las variables establecidas en el .env<\/code> que tengan el mismo nombre, est\u00e1 el caso de \u201cREACT_APP_VARIABLE_IN_PROD<\/code>\u201d que se puede acceder desde modo local.<\/p>\n\n
Resumen<\/h2>\n
\n
npm start<\/code>, npm run test<\/code> o npm run build<\/code>)<\/li>\n.env<\/code> en la ra\u00edz del proyecto.<\/li>\n.env<\/code> solo se importar\u00e1n las que inicien con el prefijo REACT_APP_<\/code>.<\/li>\n