Header Ads Widget

Ticker

6/recent/ticker-posts

Blog estático con Angular 10, Scully y JAMstack

 Hasta ahora, Angular no tenía un generador de sitios estáticos a diferencia de las otras dos bibliotecas populares: React y Vue.js, pero gracias al equipo de HeroDevs , que recientemente lanzó un generador de sitios estáticos para proyectos de Angular llamado Scully .

Hoy en día, los generadores de sitios estáticos se vuelven populares, especialmente entre los desarrolladores, para crear blogs y renderizar sus SPA de JavaScript por razones de rendimiento y SEO.

Scully puede renderizar su aplicación Angular 9+ en el lado del servidor, pero también puede usarse como un generador de blogs con soporte Markdown que puede usarse como una alternativa a los generadores populares como Jekyll o Gatsby.

¿Qué es Scully?

Scully es una solución JAMstack para desarrolladores de Angular 9+ como Gatsby para React o VuePress para Vue.js. Es un generador de sitios estáticos que convierte su aplicación Angular 10 en HTML y CSS y, dado que es compatible con Markdown, puede usarlo para blogs sin preocuparse por el SEO y la visibilidad del motor de búsqueda.

Según su sitio web oficial :

Scully hace que construir, probar e implementar aplicaciones Jamstack sea extremadamente simple.

Crea tu blog con Angular 10 y Scully

Ahora que hemos visto algo de teoría, veamos cómo usar Angular 10 y Scully para crear un blog.

Comencemos con los requisitos previos:

  • Conocimientos básicos de TypeScript. En particular, la familiaridad con conceptos orientados a objetos como clases y decoradores de TypeScript.
  • Una máquina de desarrollo local con Node 10+ , junto con NPM 6+ instalado. La CLI de Angular requiere un nodo como la mayoría de las herramientas frontend en la actualidad. Simplemente puede ir a la página de descargas del sitio web oficial y descargar los binarios para su sistema operativo. También puede consultar las instrucciones específicas de su sistema sobre cómo instalar Node usando un administrador de paquetes. Sin embargo, la forma recomendada es usar NVM - Node Version Manager - un script bash compatible con POSIX para administrar múltiples versiones activas de Node.js.
  • Scully usa Chromium. Por tanto, su Sistema Operativo, así como sus derechos de administrador, deben permitir su instalación y ejecución.

Paso 1: instalación de Angular CLI 10

Comencemos instalando la última versión de Angular CLI v10 .

Angular CLI es la herramienta oficial para inicializar y trabajar con proyectos Angular. Para instalarlo, abra una nueva terminal y ejecute el siguiente comando:

$ npm install -g @angular/cli

En el momento de esta publicación de blog, angular / cli v10 se instalará en su sistema.

Paso 2: creación de una nueva aplicación de Angular 10

Creemos ahora nuestro proyecto. Regrese a su terminal y ejecute los siguientes comandos:

$ cd ~
$ ng new angular10blog

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

Scully depende del módulo de enrutador de la aplicación para generar las páginas del sitio web.

Paso 3: instalación de Scully

Ahora, navegue en la carpeta de su proyecto e instale Scully usando los siguientes comandos:

$ cd angular10blog
$ ng add @scullyio/init

El @scullyio/initesquema realizará automáticamente todos los cambios necesarios en su proyecto de Angular 10.

Este es el tipo de salida que obtendrá en su terminal si todo está bien:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
    Install ng-lib for Angular v9
    ✅️ Added dependency
UPDATE src/app/app.module.ts (466 bytes)
UPDATE src/polyfills.ts (3028 bytes)
UPDATE package.json (1376 bytes)
✔ Packages installed successfully.
    ✅️ Update package.json
    ✅️ Created scully configuration file in scully.angular10blog.config.ts
CREATE scully.angular10blog.config.ts (188 bytes)
UPDATE package.json (1436 bytes)

El comando generará un archivo de configuración de Scully llamado scully.<projectName>.config.tsdonde projectNamees el nombre de su proyecto Angular. Este archivo se utilizará para configurar varios aspectos de su aplicación estática.

Este es el archivo de configuración inicial:

import { ScullyConfig } from '@scullyio/scully';

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: '<projectName>',
  outDir: './dist/static',
  routes: {},
};

Ahora puede renderizar su aplicación Angular 10 de forma estática usando Scully.

Tenga en cuenta que cualquier ruta en su proyecto Angular 10 que contenga parámetros de ruta no será pre-renderizada hasta que especifique los parámetros requeridos en el archivo de configuración de Scully.

Paso 5: Generación de su blog estático

Antes de que pueda ejecutar Scully, deberá construir su proyecto Angular 10 usando el siguiente comando:

$ ng build

Una vez que su proyecto de Angular 10 esté construido, puede ejecutar Scully para construir su blog estático usando el siguiente comando:

$ npm run scully

¡Eso es! Ahora tiene un sitio estático Angular 10 pre-renderizado rápido.

Puede encontrar los archivos estáticos generados en la ./dist/staticcarpeta. Contiene todas las páginas estáticas de su aplicación.

Paso 6: servicio de su blog de Angular 10

Puede acceder a la aplicación renderizada estáticamente en la /dist/staticcarpeta donde puede encontrar un index.htmlarchivo para cada ruta en su aplicación Angular 10.

Scully proporciona su propio servidor que le permite ejecutar su sitio JAMstack. Puede iniciar el servidor de Scully ejecutando el siguiente comando:

$ npm run scully:serve

El comando iniciará dos servidores, uno del ng buildcomando y otro para la compilación estática, lo que le permitirá ejecutar ambas versiones de su aplicación Angular.

Conclusión

En este tutorial, hemos visto cómo usar Angular 10 con Scully para crear una aplicación JAMstack estática que se puede usar como un blog con todos los beneficios de rendimiento y SEO de los blogs típicos.

Publicar un comentario

0 Comentarios