blog_react_sail

Creando una aplicación con React.js y Sails.js

Sails.js  es un entorno que se caracteriza por ser muy flexible y personalizable. Ocupa EJS como motor predeterminado para la visualización. Pero, si lo prefieres, puedes usar código estático con React.js si haces los ajustes necesarios en la configuración.

Esto nos permite que el código en el lado del cliente se encargue de ofrecer una visualización capaz de responder rápidamente a los cambios de datos en los modelos. Así como a manejar los controladores exclusivamente en el servidor.

Es decir, podemos usar SailsJS como MV y ReactJS como V. Esta combinación nos permite explotar lo mejor de ambas tecnologías y crear aplicaciones rápidas con capacidad de ser escalables, seguras, interactivas y/o en tiempo real.

sails new myApp

En otros artículos de esta serie, aprendimos a iniciar una aplicación en Sails.js; y conocimos sus partes y archivos principales. Para el ejemplo de hoy vamos a desactivar el View-Engine de SailsJS y usaremos ReactJS como client-side View-Engine

Para empezar, debemos abrir el archivo /config/routes.js y borrar su contenido. Al no tener rutas, el servidor buscará el archivo /assets/index.html, que tiene acceso a todo el contenido de esta carpeta de forma normal.

/config/routes.js

    module.exports.routes = {};

Lo primero que debemos hacer después de este paso, es ajustar los puertos que deseamos para nuestro servidor configurando estos archivos:

El archivo /config/env/development.js nos permite ajustar el puerto que deseamos usar para trabajar en modo de desarrollo. En este ejemplo usaremos el puerto 8080.

/config/env/development.js

module.exports = {
    port: 8080
};

En /config/env/production.js ajustamos el puerto que deseamos usar para trabajar en modo de producción. En este ejemplo usaremos el puerto 80 para que los clientes puedan acceder como lo hacen normalmente. Recuerda que puedes ajustar otras opciones como el caché y los ajustes del registro de eventos (log).

/config/env/production.js

module.exports = {
    port: 80
};

Listo, ya tenemos lo básico para nuestro servidor. Ahora sólo falta agregar los archivos estáticos en la carpeta /assets/.

Para este ejemplo vamos a mostrar una lista de elementos guardados en un JSON usando React.js. Puedes obtener una copia del código en este repositorio de GitHub. Y si deseas aprender más sobre su funcionamiento, te invito a que leas este artículo.

Ya que tengas los archivos, sólo necesitas levantar tu aplicación con el comando:

    sails lift

Para ver nuestra aplicación, entra a la dirección http://localhost:8080/ desde tu navegador.

Puedes descargar el ejemplo completo desde el repositorio en Github. Te invito a que hagas fork y compartas con nosotros tus ideas. Además, si quieres obtener más conocimientos acerca de otras configuraciones que puedes hacer con React.js, te recomiendo el Curso Profesional de React.js en Platzi.