Scully, el Primer Generador de Sitios Estáticos para Angular

La herramienta ideal para generar sitios estáticos con Angular

JAMstack

En este artículo, vamos a hablar sobre el primer Generador de Sitios Estáticos para Angular. Os presentamos a Scully.

Introducción

Utilizar un Generador de Sitios Estáticos es la mejor forma de crear posts para un blog o un portfolio. Podemos montar la estructura de un blog rápidamente, y desplegarlo en cualquier proveedor en la nube, como Netlify. -Pero, ¿Qué es lo que hace un GSS exactamente?

JAMstack

El término JAMstack fue introducido por primera vez en 2017 y su popularidad es cada vez mayor, como nos demuestra el éxito obtenido por Gatsby. ¿Qué es lo que nos ofrecen las páginas JAMstack? Veámoslo:

• Podemos construir páginas web enteras, sin necesidad de tener código en el servidor.
• Podemos desplegar las páginas en cualquier proveedor estático como Netlify.
• Podemos renderizar páginas estáticas teniendo JavaScript deshabilitado.

JAM es el acrónimo de JavaScript, APIs y Markup. Utilizamos JavaScript para cargar los datos desde las APIs y lo combinamos con markup o ficheros estáticos para renderizar páginas web estáticas.

GSS

Los Generadores de Sitios Estáticos juegan un papel importante en la creciente popularidad del JAMstack. Un GSS es una herramienta que genera un sitio estático a partir de una serie de recursos.

En un sitio estático, no hacemos llamadas a APIs para obtener datos del servidor, sino que colocamos todo el contenido en nuestras páginas en forma de texto/datos y hacemos que esté disponible para los usuarios. Un ejemplo puede ser un blog o un portfolio.

Ahora quen ya sabemos lo que es un GSS, el JAMstack y cómo están relacionados, vamos a hablar del primer Generador de Sitios Estáticos para Angular.

Otros frameworks y biblioteca

s populares, como Vue y React, tienen Generadores de Sitios Estáticos, como Gatsby y VuePress respectivamente, desde hace muco tiempo. Angular salió en 2016, pero no ha tenido un GSS hasta ahora. Por fin tenemos un Generador de Sitios Estáticos para Angular gracias a HeroDevs, que han desarrollado y mantienen Scully como un proyecto open source.

Scully, el Primer Generador de Sitios Estáticos para Angular

Primero, vamos ver cómo se construye y se despliega una aplicación Angular. No entraré en detalle acerca de Angular, presuponiendo un conocimiento mínimo acerca del framework.

Figura 1. El Angular Build Process

La Figura 1 nos proporciona un esquema del proceso de compilación de una aplicación angular. Los components, servicios, módulos y assets estáticos se procesan por el Angular Build Process, que se encarga de compilarlos. En el ejemplo de la Figura 1, tenemos un módulo blog, cargado de forma perezosa. También podemos ver que el index.html es nuestra página principal.

Diferencias con Scully

Figura 2: El Scully Build Process

En Scully, se añade un proceso adicional tras el Angular Build Process para procesar todo el contenido con el fin de crear páginas estáticas. La Figura 2 nos muestra que si procesamos la misma aplicación mostrada en el ejemplo anterior con Scully, obtenemos un index.html adicional para el módulo blog, que se carga de forma perezosa.

Vamos a crear nuestro primer blog post con Scully

• Vamos a crear una aplicación angular mediante el comando que se indica a continuación. Necesitamos el primer release de Angular Ivy, que se incluye en la versión 9 de Angular. Como actualmente está en RC, utilizamos npx para generar la aplicación con Angular Ivy:

npx -p @angular/cli@next ng new blogpostdemo

• Una vez hayamos creado nuestra aplicación, añadimos Scully mediante el siguiente comando, que añadirá toda la configuración requerida por Scully:

ng add @scullyio/init

Antes de seguir, vamos a hablar de plugins. Los plugins son muy importantes cuando utilizamos un GSS. Poniendo a Gatsby como ejemplo, podemos ver que tiene muchos plugins creados por la comunidad que ayudan a generar sitios estáticos. Scully es completamente nuevo, y tiene tres tipos de plugins disponibles:

• Router: Los plugins de router se utilizan para descubrir los datos que se utilizarán para pre-renderizar las páginas.
• Render: Los plugins de render se utilizan para transformar el HTML que se va a renderizar. Por ejemplo, se puede procesar markdown para crear una página HTML estática.
• File Handler: Los plugins de manejo de ficheros procesan ficheros estáticos, como por ejemplo, ficheros markdown.

Añadiendo soporte para un blog

La belleza de Scully radica en que no tenemos que utilizar y configurar los plugins mencionados anteriormente de forma manual. Para añadir soporte para un blog, ejecutamos el siguiente comando:

ng g @scullyio/init:blog

Esto añadirá un componente y un módulo nuevos, además de añadir configuración de carga perezosa al app.module.ts. También creará un fichero .md dentro de la carpeta blog, donde podremos añadir contenido estático.

• Abrimos el fichero .md creado en la carpeta blog, editamos el contenido y guardamos.

Usando rutas de Scully

Scully determina las rutas mediante los plugins del router. Podemos acceder a estas rutas utilizando un servicio proporcionado por Scully. No tenemos que añadir configuración manualmente, y podemos utilizar el servicio de rutas de Scully para renderizar menús de navegación.

• Para esta demo, utilizo Angular Material, que es opcional
• He creado un componente nav-bar utilizando Angular Schematics, mediante el siguiente comando:

ng generate @angular/material:nav main-nav

• Borramos el código existente en el app.component.html y añadimos:

<app-main-nav></app-main-nav>

• Abrimos el main-nav.component.ts y añadimos el siguiente código:

main-nav.component.ts

• El único código que se añade a este fichero es el relacionado con el ScullyRoutesService, que nos permite acceder a la lista de rutas disponibles.
• En el main-nav.component.html añadimos el siguiente código:

main-nav.component.html

Siguientes pasos

Podemos añadir más posts a nuestra app mediante el siguiente comando:

ng g @scullyio/init:post --name="<post-title>"

Este comando creará un nuevo fichero .md en la carpeta blog.

Creando nuestra página estática

Ahora que hemos creado un nuevo post, podemos volver a ejecutar los comandos de compilación para verificar que todo funciona correctamente. Ya estamos preparados para ejecutar el proceso de compilado de Scully para crear y ejecutar nuestra primera página estática.

• Ejecutamos los siguientes comandos. El primer comando generará output en dist/blogpostdemo y el segundo comando generará la carpeta dist/static.

ng build --prod
npm run scully

Para comprobar que todo funciona correctamente, ejecutamos el siguiente comando para instalar http-server:

npm i -g http-server

Ahora, accedemos a la carpeta dist/static desde consola y ejecutamos el siguiente comando:

http-server

Así queda nuestra página después de ejecutarla de forma local:

Aplicación Scully

Config de Scully

Cuando ejecutamos ng add, schematics añade un fichero de configuración scully.config.js, que tiene varias propiedades definidas:

• projectRoot: Esta propiedad indica la ruta de la carpeta app del proyecto. El valor por defecto es ./src/app. Esta propiedad es obligatoria.
• outFolder: Cuando ejecutamos el compilado de Scully, el output se genera en la carpeta dist/static por defecto. Si queremos cambiarla, podemos utilizar esta propiedad, que es opcional.
• routes: Podemos indicar varias rutas para generar la página estática.

Algunos consejos

• Por defecto, todos los ficheros .md se generan en la carpeta blog. Si queremos crear otra carpeta, podemos ejecutar el siguiente comando:

ng g @scullyio/init:markdown --name=articles --slug=article

El comando anterior genera una carpeta llamada articles y añadirá una nueva entrada en scully.config.js. Las rutas se cambiarán a /articles/<article-title>.

• También podemos cambiar la carpeta donde se generan los ficheros estáticos. Por defecto, es dist/static. Para cambiarla, abrimos el fichero scully.config.jsy añadimos la siguiente propiedad:

outFolder: './<output-path>'

Añadiendo más plugins

Los plugins son la parte más importante de GSS. Gatsby tiene más de mil quinientos plugins disponibles. Scully es el primer GSS para Angular y tiene tres tipos de plugins disponibles, pero necesitamos vuestra ayuda para crear nuevos plugins. Si queréis contribuir, podéis acudir a la documentación y enviar uno.

El core team de Scully ha empezado la iniciativa Office Hours, para que los desarrolladores puedan hacerles preguntas. Se llevan a cabo todos los martes al mediodía, MDT: Scully Office Hours.

Otra gran noticia es que pronto podremos obtener datos adicionales en el tiempo de compilación de nuestras APIs y utilizar TransferState para proporcionarle a nuestra aplicación todos los datos que necesite.

Conclusión

La popularidad de los Generadores de Sitios Estáticos crece cada año. Nos ayudan a crear sitios estáticos, utilizando nuestros assets e incluso renderizar las páginas con JavaScript deshabilitado. Los sitios estáticos funcionan más rápido que una página que necesita hacer llamadas a una API para obtener datos. Scully es el primer GSS para Angular. Es nuevo, así que necesitamos apoyo de la comunidad para añadir más plugins como los que tienen otros GSS como VuePress o Gatsby. Por último, un Generador de Sitios Estáticos para Angular es el mayor regalo que la comunidad Angular pueda recibir. Muchas gracias a Aaron Frost y a su equipo en HeroDevs. Son verdaderos héroes de la comunidad.

El código utilizado para este artículo está disponible en GitHub

y está desplegado en https://agitated-swartz-d8a163.netlify.com

Si queréis contribuir a Scully aquí tenéis algunos enlaces de interés:

• https://github.com/scullyio/scully
• https://github.com/scullyio/scully/blob/master/docs/scully.md

Gracias a Lars por la revisión.

Nota de la editora: Este artículo ha sido publicado originalmente por Santosh Yadav en indepth.dev: Scully, the First Static Site Generator for Angular

Traducción por Estefanía García Gallardo.