既存の Angular アプリに Scully を入れてみた - とんかつ時々あんどーなつ

既存の Angular アプリに Scully を入れてみたのでそのメモ

Scully とは

Angular 用の静的サイトジェネレーター(SSG)
各ページを pre rendering する
Node.js v10.x 以上、Angular v9.x 以上が必要(今だと v9 RC を使う必要がある)

導入

インストール

Scully - Getting Started を見ながら導入した

$ yarn ng add @scullyio/init
yarn run v1.21.1
$ ng add @scullyio/init
Installing packages for tooling via yarn.
Installed packages for tooling via yarn.
    ✅️ Added dependency
    ✅️ Import HttpClientModule into root module
UPDATE package.json (1992 bytes)
UPDATE src/app/app.module.ts (827 bytes)
UPDATE src/polyfills.ts (3039 bytes)
UPDATE src/app/app.component.ts (301 bytes)
✔ Packages installed successfully.
    ✅️ Update package.json
CREATE scully.config.js (65 bytes)
UPDATE package.json (2052 bytes)
✨  Done in 174.11s.

インストールすると ↑ こんなログが出る

ビルド

Scully のビルドには Angular アプリがビルドされている必要がある

$ yarn ng build
$ yarn scully

ビルドすると dist/static/ 配下に成果物ができる
- Scully 用の routes の scully-routes.json も一緒に生成される
production 用にする場合は $ yarn ng build --prod でビルドする
ローカルで動かすときは $ yarn scully:serve を使うと 1864 ポートで起動する