Un par de trucos para React usando el archivo package.json

Si estas empezando a programar React y usas la herramienta create-react-app, es posible que te hayas encontrado con algunos problemas que aunque puedan parecer complicados se resuelven fácilmente modificando un poquito el archivo package.json.

Indicar la ruta de la aplicación React en el servidor

Cuando terminamos nuestro proyecto, llega el maravilloso momento de compilar la aplicación Web y subirla al servidor, y es entonces cuando tal vez nos encontremos con el problema de que las rutas que hemos usado durante el desarrollo no son compatibles con las rutas que va a utilizar el programa en el servidor.

Por ejemplo, cuando desarrollamos la aplicación Web, por defecto solemos indicar las rutas absolutas respecto a la raíz del servidor Web. De este modo, para indicar por ejemplo, la ruta de la página de contacto normalmente haremos algo tal que así:

<Link className="submenu-item" to="/contacto">Contacto</Link>

Sin embargo, puede que finalmente en el servidor, por algún motivo, debamos de alojar la aplicación Web en una subcarpeta y no podamos instalar directamente la aplicación en la raíz del servidor. Esto no seria gran problema y bastaría con usar un subdominio, pero hay ocasiones en las que tampoco es posible.

En estos casos podemos ayudarnos del archivo package.json para indicar cual será la ruta de nuestra aplicación. Para ello, simplemente hemos de añadir el dicho archivo, la clave «homepage» y como valor la ruta completa que usaremos en el servidor. De este modo:

"homepage" : "https://www.servidor.com/carpeta-aplicacion"

Finalmente, en nuestra aplicación, cuando vayamos a indicar una ruta, deberemos de hacerlo de este modo para asegurarnos de que la ruta final sea la correcta y deseada:

<Link className="submenu-item" to={process.env.PUBLIC_URL + '/contacto'}>Contacto</Link>

Lo bueno de esta solución, es que si hay que cambiar la ruta o algo, tan solo tenemos que modificar la entrada que hemos añadido al archivo package.json y ya está.

Evitar problemas de CORS en React con package.json

Otro problema habitual al usar la herramienta create-react-app sucede cuando intentamos integrar nuestra aplicación Web con un backend. Aunque por lo general trabajamos en local, y tanto nuestra aplicación React como nuestro backend se encuentren en localhost, a efectos prácticos para el navegador Web son servidores diferentes por culpa del puerto.

Cuando trabajamos en nuestra aplicación React creada con create-react-app la ruta por defecto es la siguiente:

http://localhost:3000/

Es decir, el puerto 3000 de nuestro ordenador.

Sin embargo, puede que nuestro backend lo tengamos usando otro puerto, como por ejemplo el 80, y la dirección de nuestro backend sea algo así:

http://localhost/backend

NOTA: Como el puerto por defecto para HTTP es el 80, no es necesario indicarlo.

Y aunque en ambos casos el servidor es el mismo (localhost) para el navegador a efectos prácticos son servidores diferentes por culpa de la diferencia de puertos. Y es entonces cuando aparecen los problemas de CORS.

CORS es un mecanismo para poder indicar si un servidor puede acceder a los recursos de otro servidor. Y aunque podemos modificar nuestro backend para que acepte las conexiones del «servidor» localhost:3000 o de cualquier otro servidor, no es algo fácil de hacer, y además tiene sus limitaciones ya que el mecanismo que hay detrás de CORS complica y limita (por seguridad) la forma en la que se realizan estas conexiones entre servidores.

Así que antes de pelearte con este complejo sistema CORS, lo mejor seria simplemente evitarlo por completo. Siempre y cuando, estemos seguros que nuestra aplicación React y su backend estarán finalmente en el mismo servidor, claro.

De nuevo, la solución a este problema es tan sencilla como añadir un registro más al archivo package.json. Concretamente hay que añadir la clave «proxy» y el valor ha de ser la dirección URL de nuestro backend. Así de fácil:

"proxy": "http://localhost/mi-backend/"

De esta forma, cualquier petición a una dirección que no exista en nuestro «servidor React» (es decir, localhost:3000) será redirigida a ese otro servidor sin problemas de CORS ni nada.

O dicho de otro modo, si desde nuestra aplicación React intentamos acceder a este recurso del servidor backend:

http://localhost:3000/backend/datos.php

como dicha dirección no existe en nuestra aplicación React, la petición será redirigida a:

http://localhost/backend/datos.php

que es donde tenemos nuestro verdadero servidor backend de desarrollo.

Obviamente, una vez compilada la aplicación React y subida al servidor real junto al backend, no habrá ningún tipo de problema. Pero con esta solución evitaremos problemas de CORS durante el desarrollo.