Jaki艣 czas temu pisa艂em o architekturze JAMSTACK. Jest to 艣wietne rozwi膮zanie dla kogo艣, kto chcia艂bym zacz膮膰 temat z blogowaniem. Dla ludzi, kt贸rzy programuj膮 w Angular jednym z narz臋dzi do tworzenia statycznych stron jest Scully.
W tym artykule opisz臋 jak stworzy膰 i skompilowa膰 blog, kt贸ry b臋dzie posiada艂 stron臋 g艂贸wn膮 home z list膮 ostatnich post贸w oraz stron臋 o mnie about. No i oczywi艣cie stron臋 dla ka偶dego postu.
Scully potrafi przeanalizowa膰 projekt Angular i znale藕膰 list臋 routingu, na jej podstawie tworzy w艂asn膮 list臋 routingu. Jest te偶 mo偶liwo艣膰 dodania r臋cznie route. Gdy ju偶 ma gotow膮 list臋, to generuje index.html dla ka偶dego z route.
W praktyce wygl膮da to tak, 偶e w domy艣lnym folderze dist posiadamy dwa katalogi. Jeden z aplikacj膮 wygenerowana przez Angular, a drugi folder wygenerowany przez Scully.
Na pocz膮tek stw贸rzmy projekt za pomoc膮 Angular CLI
ng new scully-example
Nast臋pnie dodajmy Scully
ng add @scullyio/init
W celu stworzenia strony home i about, dla ka偶dej z nich wygenerujemy modu艂.
ng generate module home --route home --module app
ng generate module about --route about --module app
Dodajmy w g艂贸wnym komponencie aplikacji odno艣niki do ka偶dej ze stron i router-outlet do umieszczenia widoku dla route. W tym celu edytujmy plik app.component.html
<a href="/home">Home</a>
<a href="/about">About</a>
<router-outlet></router-outlet>
Spr贸bujmy skompilowa膰 nasz膮 aplikacj臋. Na pierwszy ogie艅 skompilujemy nasz projekt za pomoc膮 Angular CLI. Dodajmy flag臋 produkcyjn膮.
ng build --prod
Teraz mo偶emy stworzy膰 projekt za pomoc膮 Scully.
npm run scully -- --scanRoutes
Nie zapominajmy doda膰 flagi scanRoutes. Analizuje ona na nowo list臋 routingu. Bez jej dodania, gdyby zmieni艂 si臋 jaki艣 route, aplikacja skompilowa艂aby si臋 ze starym routingiem.
Tak jak wspomnia艂em wy偶ej w folderze dist mamy 2 foldery:
Mo偶emy teraz przetestowa膰 stron臋. W tym celu nale偶y uruchomi膰 lokalny serwer w folderze dist/static. Osobi艣cie korzystam z live-server.
Widzimy, 偶e przechodz膮c pomi臋dzy stronami home i about odwo艂ujemy si臋 do nowych plik贸w index.html.
Scully posiada prost膮 komend臋, dzi臋ki kt贸rej mo偶emy w prosty spos贸b doda膰 modu艂 do blogowania.
ng generate @scullyio/init:blog
W tym momencie sta艂y si臋 2 rzeczy
Aby po艂膮czy膰 folder i modu艂 blog potrzebna jest konfiguracja. Znajduje si臋 ona w pliku scully.scully-example.config.ts.
import { ScullyConfig } from '@scullyio/scully';
export const config: ScullyConfig = {
projectRoot: "./src",
projectName: "scully-example",
outDir: './dist/static',
routes: {
'/blog/:slug': {
type: 'contentFolder',
slug: {
folder: "./blog"
}
},
}
};
Pozosta艂o nam doda膰 na stronie home list臋 post贸w. Korzystamy z gotowego serwisu ScullyRoutesService. Posiada on stream, kt贸ry zwraca nam list臋 dost臋pnych route. Nale偶y go odpowiednio przefiltrowa膰 przez route z postami.
import { Component, OnInit } from '@angular/core';
import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({...})
export class HomeComponent implements OnInit {
links$: Observable<ScullyRoute[]> = this.scully.available$.pipe(map(arr => {
return arr.filter(x => x.published).sort((a, b) => a.date < b.date ? 1 : -1);
}));
constructor(private scully: ScullyRoutesService) { }
ngOnInit(): void {}
}
<div *ngFor="let post of links$ | async">
<a [href]="post.route">{{ post.title }}</a>
</div>
W tym momencie na stronie mamy ju偶 dodane 2 statyczne strony oraz strony wygenerowane przez modu艂 blog. Pozostaje nam tylko zarz膮dza膰 postami.
Gotowe systemy dost臋pne w internecie do zarz膮dzania tre艣ci膮 pozwol膮 nam edytowa膰 i dodawa膰 posty na stron臋. Nale偶y dokona膰 wyboru, kt贸ry nas najbardziej interesuje. Rozr贸偶niamy 2 rodzaje CMS:
Polecam CMS oparte na Git ze wzgl臋du na podej艣cie JAMSTACK. Mo偶emy sobie zapewni膰 CI/CD i mamy wgl膮d w histori臋.
Je艣li zainteresuje was przechowywanie post贸w na Git, to skorzysta艂bym z systemu Netlify lub Forestry.
Mo偶emy tworzy膰 statyczne strony za pomoc膮 Angular Universal, lecz Scully przy艣piesza i u艂atwia taka prace. Dla ludzi programuj膮cych w Angular i zainteresowanych SSG jest to 艣wietne rozwi膮zanie.
A jak tam wasze do艣wiadczenia ze statycznymi stronami? Dajcie zna膰 w komentarzu.