{"id":1063,"date":"2019-04-23T13:48:45","date_gmt":"2019-04-23T13:48:45","guid":{"rendered":"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/?p=1063"},"modified":"2019-04-23T13:48:45","modified_gmt":"2019-04-23T13:48:45","slug":"como-gestionar-las-variables-de-entornos-en-reactjs","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/","title":{"rendered":"C\u00f3mo gestionar las variables de entornos en ReactJS"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1083\" src=\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2019\/04\/C\u00f3mo-gestionar-las-variables-de-entornos-en-una-aplicaci\u00f3n-ReactJS.jpg\" alt=\"\" width=\"1145\" height=\"728\" srcset=\"https:\/\/encaminablogs.wpenginepowered.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2019\/04\/C\u00f3mo-gestionar-las-variables-de-entornos-en-una-aplicaci\u00f3n-ReactJS.jpg 1145w, https:\/\/encaminablogs.wpenginepowered.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2019\/04\/C\u00f3mo-gestionar-las-variables-de-entornos-en-una-aplicaci\u00f3n-ReactJS-300x191.jpg 300w, https:\/\/encaminablogs.wpenginepowered.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2019\/04\/C\u00f3mo-gestionar-las-variables-de-entornos-en-una-aplicaci\u00f3n-ReactJS-768x488.jpg 768w, https:\/\/encaminablogs.wpenginepowered.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2019\/04\/C\u00f3mo-gestionar-las-variables-de-entornos-en-una-aplicaci\u00f3n-ReactJS-1024x651.jpg 1024w, https:\/\/encaminablogs.wpenginepowered.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2019\/04\/C\u00f3mo-gestionar-las-variables-de-entornos-en-una-aplicaci\u00f3n-ReactJS-610x388.jpg 610w\" sizes=\"auto, (max-width: 1145px) 100vw, 1145px\" \/><\/p>\n<p>La evoluci\u00f3n de la tecnolog\u00eda en la actualidad es m\u00e1s r\u00e1pida que la luz. Lo que hoy es blanco, ma\u00f1ana es negro. Hace unos a\u00f1os no pens\u00e1bamos tener aplicaciones fuera de nuestras infraestructuras y ahora mismo la tendencia es que casi todas las aplicaciones est\u00e1n en el cloud y\/o bien consumen servicios del mismo.<\/p>\n<p><!--more--><\/p>\n<p>Si trasladamos esto a nuestro d\u00eda a d\u00eda, lo que hace unos a\u00f1os parec\u00eda una utop\u00eda (tener los desarrollos alojados en sistemas NO Microsoft), hoy\u00a0 es una realidad. Con la llegada de .NET Core junto con la fiebre por los Microservicios (Kubernetes, Docker, etc..) cada vez es m\u00e1s normal tener un separaci\u00f3n del BackEnd y del FrontEnd a nivel f\u00edsico o tener un alojamiento diferente (contenedor\/web app). Partiendo de este contexto, lo que anteriormente utiliz\u00e1bamos para <a href=\"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/net-core-paso-de-parametros-a-nuestra-aplicacion-reactjs\/\" target=\"_blank\" rel=\"noopener noreferrer\">pasar los par\u00e1metros\u00a0 a la aplicaci\u00f3n, <\/a>\u00a0ya no es valido y tenemos que buscar la forma de hacerlo.<\/p>\n<h2>Crear aplicaci\u00f3n en ReactJS<\/h2>\n<p>Para crear una aplicaci\u00f3n ReactJS la mejor forma de hacerlo es utilizando la herramienta \u00ab<a href=\"https:\/\/facebook.github.io\/create-react-app\/docs\/getting-started\" target=\"_blank\" rel=\"noopener noreferrer\">Create-react-app<\/a>\u00ab. Se trata de un paquete NPM creado por Facebook, que crea un proyecto\u00a0 ReactJS y que genera un fichero de configuraci\u00f3n con las \u00faltimas versiones compatibles. Una de sus grandes ventajas es que tiene una serie de utilidades out-of-the-box para simplificar el desarrollo. Entre estas utilidades viene configurado un <strong>servidor de desarrollo<\/strong>, una serie de <strong>reglas de sintaxis<\/strong> (jslint\/tslint) y la generaci\u00f3n de un <strong>bundle para producci\u00f3n<\/strong>.\u00a0 En caso de que necesitemos modificar alguna de estas utilidades, no hay ning\u00fan problema, por lo que no estamos atados en caso de necesitar alguna modificaci\u00f3n al mismo.<\/p>\n<p>Con el siguiente c\u00f3digo tenemos arrancado un \u00abHello World\u00bb de React en el tiempo en el que se descargan los paquetes npm necesarios.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nnpx create-react-app my-app --typescript\r\nnpm install \r\nnpm run start\r\n<\/pre>\n<p>En la creaci\u00f3n de dicha soluci\u00f3n hay un fichero \u00ab.env\u00bb. La utilidad que tiene dicho fichero es la de tener todas las variables de entorno que tendr\u00e1 la aplicaci\u00f3n. Por ejemplo, si vamos a tener una variable en la que tengamos la url de la API que vamos a consumir, hace falta este fichero:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nREACT_APP_API_URL=https:\/\/demoblog.encamina.com\/api\r\n<\/pre>\n<p>A la hora de definir la variables debemos considerar\u00a0 que nuestra aplicaci\u00f3n solo va a sustituir las variables que comiencen por REACT_APP. Este funcionamiento es para evitar reemplazar valores que puedan estar en el servidor NodeJS.<br \/>\nAhora bien, como lo consumimos desde el c\u00f3digo, la soluci\u00f3n es tan f\u00e1cil como\u00a0 poner el siguiente c\u00f3digo donde se utilice ese valor:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nconst baseURL = process.env.REACT_APP_API\r\n<\/pre>\n<p><strong>Gestionando entornos out-of-the-box<\/strong><br \/>\nEste fichero est\u00e1 muy bien siempre y cuando estamos en entornos de desarrollo, pero \u00bfc\u00f3mo los gestionamos si estas variables son diferentes en los distintos entornos que tenemos? Si nosotros creamos un fichero con la estructura .env.{nombre_de_entorno} podemos utilizarlo siempre que indiquemos el entorno en el que esta.<\/p>\n<p><strong>\u00bfPero c\u00f3mo podemos indicar en que entorno estamos?<\/strong><br \/>\nCuando vamos a arrancar la aplicaci\u00f3n, bien con el comando npm run start o bien cuando compilamos npm run build, lo que tenemos que hacer es a\u00f1adir el nombre del entorno. Por ejemplo si queremos arrancar nuestra aplicaci\u00f3n haciendo uso de las variables del entorno de producci\u00f3n, pondr\u00edamos la siguiente instrucci\u00f3n:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nnpm run start .env.produccion\r\n<\/pre>\n<p>Otra forma de cambiar estas variables es estableci\u00e9ndolas en el propio entorno del servidor de NodeJS. Por ejemplo:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\"> set &quot;REACT_APP_API_URL=https:\/\/demoblog.encamina.com\/api&quot; <\/pre>\n<h2><strong>\u00bfC\u00f3mo podemos mejorar esta gesti\u00f3n de entornos?<\/strong><\/h2>\n<p>El comportamiento out-of-the-box que trae de serie Create React puede cumplir bastante bien esta gesti\u00f3n de entornos y es v\u00e1lido en la mayoria de casos.<\/p>\n<p>No obstante, hay determinados proyectos en los que se hecha de menos una herramienta un poco m\u00e1s friendly que nos permita ver las variables de todos los entornos a primera vista. Por este motivo empezamos a utilizar el paquete <a href=\"https:\/\/www.npmjs.com\/package\/env-cmd\" target=\"_blank\" rel=\"noopener noreferrer\">env-cmd <\/a>. Es un simple paquete npm que se encarga de cargar los variables de entorno en nuestra aplicaci\u00f3n. En lugar de tener un fichero por entorno, tenemos un \u00fanico fichero en el que est\u00e1n todas las variables definidas. Este fichero, se llama env.cmdrc. Para el caso tendr\u00edamos un fichero como el siguiente:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n{\r\n   &quot;LOCAL&quot;: {\r\n    &quot;REACT_APP_API_URL&quot;:&quot;https:\/\/localhost:44382\/&quot;\r\n  },\r\n  &quot;INT&quot;: {\r\n    &quot;REACT_APP_API_URL&quot;:&quot;https:\/\/blogs-dev-webapp.azurewebsites.net\/&quot;\r\n  },\r\n  &quot;PRE&quot;: {\r\n    &quot;REACT_APP_API_URL&quot;:&quot;\/&quot;\r\n  },\r\n  &quot;PRO&quot;: {\r\n    &quot;REACT_APP_API_URL&quot;:&quot;\/&quot;\r\n  }\r\n}\r\n<\/pre>\n<p>Ahora bien \u00bfc\u00f3mo hacemos uso de cada variable en cada entorno? Pues haciendo uso la instrucci\u00f3n \u00abenv-cmd\u00bb {nombre del entorno} antes de ejecutar la aplicaci\u00f3n de una forma como la siguiente:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nenv-cmd PRO npm run build\r\n<\/pre>\n<p>Con la finalidad de tener las instrucciones ya escritas y agilizar el proceso de compilaci\u00f3n, o bien preparar los ficheros\/bundles para los entornos donde se despliega, en el package.json de la soluci\u00f3n a\u00f1adiremos las instrucciones necesarias para ello. Un ejemplo de los scripts que hacemos uso seria el siguiente:<\/p>\n<p>  &quot;scripts&quot;: {<br \/>\n    &quot;start&quot;: &quot;react-scripts start&quot;,<br \/>\n    &quot;start:local&quot;: &quot;env-cmd LOCAL npm run start&quot;,<br \/>\n    &quot;build&quot;: &quot;react-scripts build&quot;,<br \/>\n    &quot;test&quot;: &quot;react-scripts test&quot;,<br \/>\n    &quot;eject&quot;: &quot;react-scripts eject&quot;,<br \/>\n    &quot;build:int&quot;: &quot;env-cmd INT npm run build&quot;,<br \/>\n    &quot;build:pro&quot;: &quot;env-cmd PRO npm run build&quot;<br \/>\n  }<\/p>\n<h2>Conclusi\u00f3n<\/h2>\n<p>En este art\u00edculo hemos visto c\u00f3mo podemos utilizar en nuestros desarrollos en ReactJS diferentes valores dependiendo del entorno en el que vayamos a desplegar dicho contenido. El tener grabadas \u00aba fuego\u00bb las variables independientemente del lenguaje de programaci\u00f3n no es una buena pr\u00e1ctica y por este motivo hay que buscar c\u00f3mo optimizar esta gesti\u00f3n. En futuros art\u00edculos veremos c\u00f3mo podemos desplegar estos desarrollos en diferentes entornos haciendo uso de <strong>Azure Devop<\/strong> \ud83d\ude42<br \/>\nHappy codding \ud83d\ude42<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content --><span class=\"et_bloom_bottom_trigger\"><\/span>","protected":false},"excerpt":{"rendered":"<p>La evoluci\u00f3n de la tecnolog\u00eda en la actualidad es m\u00e1s r\u00e1pida que la luz. Lo que hoy es blanco, ma\u00f1ana es negro. Hace unos a\u00f1os no pens\u00e1bamos tener aplicaciones fuera de nuestras infraestructuras y ahora mismo la tendencia es que &hellip; <a href=\"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,98],"tags":[100],"class_list":["post-1063","post","type-post","status-publish","format-standard","hentry","category-net","category-reactjs","tag-reactjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v28.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>C\u00f3mo gestionar las variables de entornos en ReactJS | ENCAMINA<\/title>\n<meta name=\"description\" content=\"Tener grabadas &quot;a fuego&quot; las variables independientemente del lenguaje de programaci\u00f3n no es una buena pr\u00e1ctica y por este motivo hay que buscar c\u00f3mo optimizar esta gesti\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo gestionar las variables de entornos en ReactJS\" \/>\n<meta property=\"og:description\" content=\"Tener grabadas &quot;a fuego&quot; las variables independientemente del lenguaje de programaci\u00f3n no es una buena pr\u00e1ctica y por este motivo hay que buscar c\u00f3mo optimizar esta gesti\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Piensa en software, desarrolla en colores\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-23T13:48:45+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2019\/04\/C\u00f3mo-gestionar-las-variables-de-entornos-en-una-aplicaci\u00f3n-ReactJS.jpg\" \/>\n<meta name=\"author\" content=\"Adri\u00e1n D\u00edaz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adri\u00e1n D\u00edaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/como-gestionar-las-variables-de-entornos-en-reactjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/como-gestionar-las-variables-de-entornos-en-reactjs\\\/\"},\"author\":{\"name\":\"Adri\u00e1n D\u00edaz\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\"},\"headline\":\"C\u00f3mo gestionar las variables de entornos en ReactJS\",\"datePublished\":\"2019-04-23T13:48:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/como-gestionar-las-variables-de-entornos-en-reactjs\\\/\"},\"wordCount\":1083,\"commentCount\":0,\"keywords\":[\"reactjs\"],\"articleSection\":[\".NET\",\"ReactJS\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/como-gestionar-las-variables-de-entornos-en-reactjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/como-gestionar-las-variables-de-entornos-en-reactjs\\\/\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/como-gestionar-las-variables-de-entornos-en-reactjs\\\/\",\"name\":\"C\u00f3mo gestionar las variables de entornos en ReactJS | ENCAMINA\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/#website\"},\"datePublished\":\"2019-04-23T13:48:45+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\"},\"description\":\"Tener grabadas \\\"a fuego\\\" las variables independientemente del lenguaje de programaci\u00f3n no es una buena pr\u00e1ctica y por este motivo hay que buscar c\u00f3mo optimizar esta gesti\u00f3n.\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/como-gestionar-las-variables-de-entornos-en-reactjs\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/#website\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/\",\"name\":\"Piensa en software, desarrolla en colores\",\"description\":\"Las ventajas que te ofrece Microsoft Azure y el mundo.NET\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\",\"name\":\"Adri\u00e1n D\u00edaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"caption\":\"Adri\u00e1n D\u00edaz\"},\"description\":\"Adri\u00e1n D\u00edaz es Ingeniero Inform\u00e1tico por la Universidad Polit\u00e9cnica de Valencia. Es MVP de Microsoft en la categor\u00eda Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnolog\u00edas Microsoft m\u00e1s de 10 a\u00f1os y desde hace 3 a\u00f1os est\u00e1 centrado en el desarrollo sobre SharePoint. Actualmente es Software &amp; Cloud Architect Lead en ENCAMINA.\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/author\\\/desarrollandosobresharepoint\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo gestionar las variables de entornos en ReactJS | ENCAMINA","description":"Tener grabadas \"a fuego\" las variables independientemente del lenguaje de programaci\u00f3n no es una buena pr\u00e1ctica y por este motivo hay que buscar c\u00f3mo optimizar esta gesti\u00f3n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo gestionar las variables de entornos en ReactJS","og_description":"Tener grabadas \"a fuego\" las variables independientemente del lenguaje de programaci\u00f3n no es una buena pr\u00e1ctica y por este motivo hay que buscar c\u00f3mo optimizar esta gesti\u00f3n.","og_url":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/","og_site_name":"Piensa en software, desarrolla en colores","article_published_time":"2019-04-23T13:48:45+00:00","og_image":[{"url":"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2019\/04\/C\u00f3mo-gestionar-las-variables-de-entornos-en-una-aplicaci\u00f3n-ReactJS.jpg","type":"","width":"","height":""}],"author":"Adri\u00e1n D\u00edaz","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Adri\u00e1n D\u00edaz","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/#article","isPartOf":{"@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/"},"author":{"name":"Adri\u00e1n D\u00edaz","@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb"},"headline":"C\u00f3mo gestionar las variables de entornos en ReactJS","datePublished":"2019-04-23T13:48:45+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/"},"wordCount":1083,"commentCount":0,"keywords":["reactjs"],"articleSection":[".NET","ReactJS"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/","url":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/","name":"C\u00f3mo gestionar las variables de entornos en ReactJS | ENCAMINA","isPartOf":{"@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/#website"},"datePublished":"2019-04-23T13:48:45+00:00","author":{"@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb"},"description":"Tener grabadas \"a fuego\" las variables independientemente del lenguaje de programaci\u00f3n no es una buena pr\u00e1ctica y por este motivo hay que buscar c\u00f3mo optimizar esta gesti\u00f3n.","inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-gestionar-las-variables-de-entornos-en-reactjs\/"]}]},{"@type":"WebSite","@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/#website","url":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/","name":"Piensa en software, desarrolla en colores","description":"Las ventajas que te ofrece Microsoft Azure y el mundo.NET","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb","name":"Adri\u00e1n D\u00edaz","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","caption":"Adri\u00e1n D\u00edaz"},"description":"Adri\u00e1n D\u00edaz es Ingeniero Inform\u00e1tico por la Universidad Polit\u00e9cnica de Valencia. Es MVP de Microsoft en la categor\u00eda Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnolog\u00edas Microsoft m\u00e1s de 10 a\u00f1os y desde hace 3 a\u00f1os est\u00e1 centrado en el desarrollo sobre SharePoint. Actualmente es Software &amp; Cloud Architect Lead en ENCAMINA.","url":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/author\/desarrollandosobresharepoint\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/posts\/1063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/comments?post=1063"}],"version-history":[{"count":0,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/posts\/1063\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/media?parent=1063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/categories?post=1063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/tags?post=1063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}