![\".Net](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2018\/01\/desarrollo-sistemas-informaticos.png\" "\\".Net")
<\/p>\n<\/p>\n
Los tiempos en el desarrollo han cambiado. Si bien antes toda la importancia reca\u00eda en el servidor, ahora priman las aplicaciones desarrolladas con Javascript <\/strong>y el framework<\/strong> que m\u00e1s se adapta a las necesidades de tu soluci\u00f3n. Este cambio lo podemos observar claramente en los desarrollos en ASP NET .Core.<\/strong><\/p>\n <\/p>\n Hemos pasado de la gran importancia de un lenguaje de servidor como Razor (<\/em>que se encargaba de enviar el html a nuestro navegador), a que el desarrollo web opte por otras caracter\u00edsticas, haciendo que\u00a0 su importancia sea mucho menor.<\/p>\n Dado el creciente uso del Front-End<\/strong>, en algunos casos es necesario que dispongamos de acceso a un fichero de configuraci\u00f3n o similar. Por ejemplo, nuestro Front-End tiene que atacar una API de clientes. Esta url de la API, tal y como habr\u00e9is deducido, cambia dependiendo del entorno en el que se ejecute.<\/p>\n Opciones disponibles:<\/p>\n En este art\u00edculo vamos a ver c\u00f3mo optar por esta \u00faltima opci\u00f3n utilizando un aplicaci\u00f3n ASP.NET Core 2.0<\/strong>\u00a0en la parte de Front-End React.<\/p>\n En primer lugar,\u00a0 vamos a desarrollar esta aplicaci\u00f3n utilizando Razor<\/em> como elemento de carga<\/strong>, en lugar de cargar directamente\u00a0 una p\u00e1gina html. El motivo de utilizar Razor para este primera carga es simple: podemos asegurarnos en el servidor de dotar de medidas de seguridad mucho m\u00e1s sencillas que si lo hici\u00e9ramos directamente en dicha p\u00e1gina (pero esto ya lo abordaremos en futuros post).<\/p>\n Dentro de ese Layout accederemos a los valores de configuraci\u00f3n que decidamos,\u00a0 utilizando la clase Iconfiguration de .NET Core de la siguiente forma:<\/p>\n En el momento en que se ejecute en nuestra p\u00e1gina, tendremos un div con un data-anotations y el valor de dicho par\u00e1metro de configuraci\u00f3n.<\/p>\n Pero, \u00bfc\u00f3mo lo aplicamos a nuestro desarrollo en React <\/strong>y c\u00f3mo lo introducimos de una forma natural en su ciclo de vida?<\/p>\n Esta forma de paso de par\u00e1metros <\/strong>se puede utilizar para cualquier Frameworkd JS y no solo para ReactJS.<\/p>\n Ahora bien, de cara a aplicarlo en entornos de producci\u00f3n, hay que a\u00f1adir alguna medida m\u00e1s de seguridad<\/strong> ya que de lo contrario, un usuario avanzado puede llegar a visualizar detalles de configuraci\u00f3n que no deber\u00eda conocer. Por ese motivo insisto en lo que ya he comentado al inicio del art\u00edculo: todo lo que pasemos entre el Back y el Front-end de nuestra aplicaci\u00f3n deben ser par\u00e1metros que no comprometan su seguridad.<\/p>\n \u00a1Happy codding! \ud83d\ude42<\/p>\n<\/span>","protected":false},"excerpt":{"rendered":" Los tiempos en el desarrollo han cambiado. Si bien antes toda la importancia reca\u00eda en el servidor, ahora priman las aplicaciones desarrolladas con Javascript y el framework que m\u00e1s se adapta a las necesidades de tu soluci\u00f3n. Este cambio lo … Continue reading \u00bfC\u00f3mo lo solucionamos?<\/h2>\n
\n
![\".Net](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2018\/02\/1447936955192_2.jpg\")
<\/p>\nPaso de par\u00e1metros a nuestra aplicaci\u00f3n ReactJS<\/h2>\n
\r\n@{\r\n ViewData["Title"] = "Home Page";\r\n}\r\n\r\n@using Microsoft.Extensions.Configuration\r\n@inject IConfiguration Configuration\r\n\r\n<div id="react-app">Loading...<\/div>\r\n\r\n<div id="settings" data-url="@Configuration.GetSection("Settings:UrlAPI").Value"><\/div>\r\n<\/pre>\n\n
\r\nexport var SiteProps: { SiteURL: string } = { SiteURL: "" };\r\n<\/pre>\n\n
\r\nfunction renderApp() {\r\n \/\/ This code starts up the React app when it runs in a browser. It sets up the routing\r\n \/\/ configuration and injects the app into a DOM element.\r\n initializeIcons(undefined, { disableWarnings: true });\r\n var app = document.getElementById('react-app');\r\n var settings = document.getElementById('settings');\r\n var username = app.dataset.user;\r\n var url = settings.dataset.url;\r\n SiteProps.SiteURL = url;\r\n\r\n ReactDOM.render(\r\n <AppContainer>\r\n <Provider store={store}>\r\n <ConnectedRouter children={routes} history={history} \/>\r\n <\/Provider>\r\n <\/AppContainer>,\r\n document.getElementById('react-app')\r\n );\r\n}\r\n<\/pre>\n