Ionic AngularでScullyを使ったSSGを試す

ScullyというAngular向けのStatic Site Generatorがあります。理論上、Angular を使用したIonicアプリケーションでも動くはずなので、試してみました。

Environment

$ ionic -v          
6.10.2

$ npm ng -v   
6.10.2

Step by Step

Step1: プロジェクトの作成

なにはなくともまずはプロジェクトの作成から

$ npx @ionic/cli start
$ cd PROJECT_DIR

Step2:Scullyの追加

ng add @scullyio/initで追加します。

$ npm run ng add @scullyio/init
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 (832 bytes)
UPDATE src/polyfills.ts (3059 bytes)
UPDATE package.json (1771 bytes)
✔ Packages installed successfully.
    ✅️ Update package.json
    ✅️ Created scully configuration file in scully.app.config.ts
CREATE scully.app.config.ts (178 bytes)
UPDATE package.json (1831 bytes)

Step3: ビルド

あとはビルドするだけです。コマンドが2つ必要なので注意してください。

// Build Ionic application
$ npm run build

// Generate Static Site By Scully
$ npm run scully

Tips: npm run export のススメ

毎回2つ打つのも面倒なので、まとめておくと便利でしょう。

diff --git a/package.json b/package.json
index 0fdd23d..7b0f2b0 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "lint": "npm run ionic lint",
     "e2e": "npm run ionic e2e",
     "scully": "scully",
     "scully:serve": "scully serve",
+    "export": "npm run build && npm run scully"
   },
   "private": true,
   "dependencies": {

Step4: サイトの確認

scully:serveで生成されたサイトが確認できます。

% npm run scully serve
> scully "serve"

starting static server

----------------------------------
Using stored unhandled routes!.
   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
----------------------------------
Scully static server started on "http://localhost:1668/"
Angular distribution server started on "http://localhost:1864/"

デプロイされたコードはどこにある？

dist/static ディレクトリにあります。デプロイする際はこのパスを指定しましょう。

Example: Serve the site by PHP

$ cd dist/static
$ php -S localhost:8000

Demo site

以下にデモサイトとリポジトリをおいておきますので、参考になればです。

GitHub: https://github.com/hideokamoto/ionic-angular-scully

Demo Site: https://ionic-angular-with-scully-example.netlify.app/