1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Angular 9.0.0-rc.6 + Scullyを試してみた

Posted at

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的なサイトを作れますね。
ありがとうございました。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?