Probar la aplicación

Antes de desplegar el proyecto, puedes compilar y probar automáticamente la aplicación React en un servidor local usando el siguiente comando:

Para asegurarte de que el proyecto “Catly” se ejecute localmente, ejecuta el siguiente comando desde la raíz del directorio de tu proyecto:

La aplicación Catly ahora se servirá como una aplicación React usando el plugin Catalyst React. Las aplicaciones React implementan la funcionalidad Hot Module Replacement(HMR) que actualiza y recarga módulos específicos, sin recompilar y recargar todo el proyecto, cuando se realizan cambios durante una sesión de serve. HMR se habilita de forma predeterminada cuando sirves la aplicación a través del Catalyst CLI.

Ahora puedes abrir la URL local del componente cliente en un navegador para acceder a la aplicación Cat.ly.

Probemos la aplicación acortando una URL. Ingresa la URL en el cuadro de texto y haz clic en Shrink. Cat.ly acortará la URL y mostrará su versión acortada (/server/catly/short ID) en la página web junto con la URL original si la configuración funciona correctamente. El conteo de URLs se incrementa a 1.

Verifiquemos si la URL original y su ID corto se agregaron a los componentes Data Store y Cache.

Abre el Data Store del proyecto Catly en tu consola de Catalyst. Deberías encontrar el registro poblado en la tabla UrlShorten.

Ahora abre el componente cache en tu consola de Catalyst. Deberías encontrar el elemento de cache creado automáticamente en el segmento.

Como se explicó anteriormente, la clave del elemento de cache es el ID corto y su valor es una cadena del ID corto, la URL original y los metadetalles de la tabla. La expiración del elemento de cache se establece en la expiración predeterminada de dos días.

El elemento de cache se sobrescribe cada vez que se realiza una operación GET para obtener la URL original. Se escribe un nuevo tiempo de expiración en el elemento de cache a través de una operación POST y la expiración se establece en dos días de forma predeterminada después del momento más reciente en que se accedió. Esto significa que cada vez que se accede a la URL, el elemento de cache se almacena en el segmento shortUrl por dos días más hasta que expire.

Si una URL no se accede durante dos días, se elimina del cache. Si se accede después de que los dos días hayan pasado, los datos se obtienen de la tabla UrlShorten en el Data Store y se escriben nuevamente en el cache como un nuevo elemento de cache.

Ahora accedamos a la URL y verifiquemos la redirección.

Haz clic en la flecha junto a la versión acortada o en cualquier lugar sobre el elemento de la lista en el front-end de Cat.ly. El navegador será redirigido a la URL original por Catalyst.

Si esta configuración funciona correctamente, podemos desplegar la aplicación a producción.