.Net Core: Paso de parámetros a nuestra aplicación ReactJS

Los tiempos en el desarrollo han cambiado. Si bien antes toda la importancia recaía en el servidor, ahora priman las aplicaciones desarrolladas con Javascript y el framework que más se adapta a las necesidades de tu solución. Este cambio lo podemos observar claramente en los desarrollos en ASP NET .Core.

Hemos pasado de la gran importancia de un lenguaje de servidor como Razor (que se encargaba de enviar el html a nuestro navegador), a que el desarrollo web opte por otras características, haciendo que  su importancia sea mucho menor.

Dado el creciente uso del Front-End, en algunos casos es necesario que dispongamos de acceso a un fichero de configuración o similar. Por ejemplo, nuestro Front-End tiene que atacar una API de clientes. Esta url de la API, tal y como habréis deducido, cambia dependiendo del entorno en el que se ejecute.

¿Cómo lo solucionamos?

Opciones disponibles:

• Tener un fichero JS en el que nos definamos estas constantes . Su principal inconveniente sería que cuando el fichero salga del entorno de desarrollo, lo normal es que se haga un bundle que unifique todos los JavaScript en un entorno con el que no vamos a modificar este bundle…¿o sí? 😉  Independientemente de que este fichero se pueda modificar, no creo que sea la opción que debamos  utilizar. Primero, porque quizás (sólo quizás), la persona encargada de este servidor no va a poder modificarlo sin que haya una catástrofe.
• Implementar en nuestra aplicación un método REST que nos devuelva estos aspectos de configuración. Ésta puede ser una buena opción. El único «pero» que le veo, es que esta llamada tiene un retardo y puede penalizar nuestra aplicación.
• Inyectar los valores de configuración en data-anotations de nuestro html.

En este artículo vamos a ver cómo optar por esta última opción utilizando un aplicación ASP.NET Core 2.0 en la parte de Front-End React.

Paso de parámetros a nuestra aplicación ReactJS

En primer lugar,  vamos a desarrollar esta aplicación utilizando Razor como elemento de carga, en lugar de cargar directamente  una página 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ás sencillas que si lo hiciéramos directamente en dicha página (pero esto ya lo abordaremos en futuros post).

Dentro de ese Layout accederemos a los valores de configuración que decidamos,  utilizando la clase Iconfiguration de .NET Core de la siguiente forma:

@{
    ViewData["Title"] = "Home Page";
}

@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<div id="react-app">Loading...</div>

<div id="settings" data-url="@Configuration.GetSection("Settings:UrlAPI").Value"></div>

En el momento en que se ejecute en nuestra página, tendremos un div con un data-anotations y el valor de dicho parámetro de configuración.

Pero, ¿cómo lo aplicamos a nuestro desarrollo en React y cómo lo introducimos de una forma natural en su ciclo de vida?

• Partimos de la base de que vamos a utilizar React haciendo uso de una arquitectura Flux (la cual la implementaremos con Redux), por lo cual, en primer lugar vamos a crear una variable de forma global a la aplicación:

export var SiteProps: { SiteURL: string } = { SiteURL: "" };

• Una vez tenemos la variable definida, lo que tenemos que hacer antes de llamar al Boot de la aplicación de ReactJS, es obtener el valor del DOM y asignárselo a esta variable.

function renderApp() {
    // This code starts up the React app when it runs in a browser. It sets up the routing
    // configuration and injects the app into a DOM element.
    initializeIcons(undefined, { disableWarnings: true });
    var app = document.getElementById('react-app');
    var settings = document.getElementById('settings');
    var username = app.dataset.user;
    var url = settings.dataset.url;
    SiteProps.SiteURL = url;

    ReactDOM.render(
        <AppContainer>
            <Provider store={store}>
                <ConnectedRouter children={routes} history={history} />
            </Provider>
        </AppContainer>,
        document.getElementById('react-app')
    );
}

Esta forma de paso de parámetros se puede utilizar para cualquier Frameworkd JS y no solo para ReactJS.

Ahora bien, de cara a aplicarlo en entornos de producción, hay que añadir alguna medida más de seguridad ya que de lo contrario, un usuario avanzado puede llegar a visualizar detalles de configuración que no debería conocer. Por ese motivo insisto en lo que ya he comentado al inicio del artículo: todo lo que pasemos entre el Back y el Front-end de nuestra aplicación deben ser parámetros que no comprometan su seguridad.

¡Happy codding! 🙂