Angularの静的サイトジェネレータが出来たので試してみました。
公式のREADME読んでそのままやっただけですが、、、
以下参考
https://github.com/scullyio/scully/blob/master/docs/getting-started.md
下準備
表題通りにするためにAngular CLIをバージョンアップ。
$ yarn global add @angular/cli@next
やってみた
まずはプロジェクトを作成します。
$ ng n learn-scully
Angular 9からはIvyがデフォルトで有効になっていますが、今回は関係ないですね。
routing
を有効にしちゃったけど、静的化するなら意味ない?
とりあえず気にせず進みます。
プロジェクトのディレクトリになんやかんやで入って、
(自分はVSCode開いてターミナルでやりましたが、ぶっちゃけ要らないのでcd
でいいです)
早速Scully
を入れていきます。
$ ng add @scullyio/init
package.json
を確認すると、
{
"name": "learn-scully",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"scully": "scully",
"scully:serve": "scully serve"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.0-rc.6",
"@angular/common": "~9.0.0-rc.6",
"@angular/compiler": "~9.0.0-rc.6",
"@angular/core": "~9.0.0-rc.6",
"@angular/forms": "~9.0.0-rc.6",
"@angular/platform-browser": "~9.0.0-rc.6",
"@angular/platform-browser-dynamic": "~9.0.0-rc.6",
"@angular/router": "~9.0.0-rc.6",
"@scullyio/init": "0.0.8",
"@scullyio/ng-lib": "latest",
"@scullyio/scully": "latest",
"rxjs": "~6.5.3",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.0-rc.6",
"@angular/cli": "~9.0.0-rc.6",
"@angular/compiler-cli": "~9.0.0-rc.6",
"@angular/language-service": "~9.0.0-rc.6",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.2",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.6.4"
}
}
こんな感じになってるはず。
記事書いてる時だと9.0.0-rc.6
が最新だったのでこうなってます。
それではbuildしていきましょう。
$ ng build
$ yarn scully
これだけ。簡単。
ローカルサーバ起動は、
$ yarn scully:serve
Scullyの静的なサーバが立ち上がります。
Angularの標準のサーバも立ち上がってる?
感想
これでAngularでも流行りのJAMstack的なサイトを作れますね。
ありがとうございました。