はじめに
！AnuglarDartとは
マテリアルデザインの動的Webページを作成することができます。
Angularのアーキテクチャについては触れませんが、
資料は結構あると思いますので お初の方はぜひ調べてみてください。
GitHub Pagesで公開する
GitHub PagesについてはGitHub利用者は理解していると思うので特に書くことはないですね。
もちろん、GitHub PagesはDartには対応していないので、
そのままリポジトリを作成したところで、正常に動くことはありません。
ですが、peanutパッケージを使用することでこれが可能になります。
手順について説明していきます。
0. DartSDKの更新
これは必要な方のみです。
要求されるバージョンに合うように最新版に更新しておきましょう。
1. peanutをインストールする
ターミナルで
pub global activate peanut を実行します。
実行すると必要なものがダウンロードされます。
Installed executable peanut.
Activated peanut 3.2.1.
この表示が出れば成功です。
(僕はwindowsなのでそれ以外の場合はわかりませんが)パスが表示されると思うので
環境変数に追加しておきます。
追加後、後述の作業ができない際はマシンの再起動などを試みましょう。
2. リポジトリのクローン
リポジトリをローカルにクローンしておきましょう。
そして、ローカルリポジトリのディレクトリまでcdコマンド等で移動しておきます。
3. 実行する
まずは、pub get を実行して
依存関係をダウンロードします。
次に、peanut を実行します。
これを行うとプロジェクトが構築され、
gh-pagesブランチに対してコミットが行われます。
エラーで先に進めない場合
僕の実行した環境でもエラーが起きてしまいました。
次のように pubspec.yamlを編集し、改善できるか試してみてください。
※ 投稿した時点の情報なので、内容が変わる可能性があります。コメントいただけると修正いたします
#該当項目のバージョンを以下のように変更してください
build_runner: '>=1.3.0 <2.0.0'
build_web_compilers: ' >=1.2.0 <3.0.0'
4. commitをpushする
pushを行う際に気を付けるべきことは、
特に理由のない場合は masterブランチにpushしないことを推奨します。
理由は、本来書いたソースと見た目が違うものがコミットされているからです。
現存のソースを維持しつつページを公開したい場合は
gh-pagesブランチにpushを行います。
(gh-pagesブランチにコミットが行われているので手順を間違えなければ大丈夫だと思いますが)
コマンドはこちら
git push origin --set-upstream gh-pages
GitHubのリポジトリへ行き、ブランチができていることを確認してください。
5. GitHub Pagesで公開設定を行う
リポジトリのページへ行き、上部の項目から、
歯車マークの付いた Settingsと書かれた項目をクリックします。
下へスクロールすると、GitHub Pages の項目があります。
以下の画像のように選択してください。
これで設定は完了です。
6. 動作確認
あとは、表示される https://○○.github.io/リポジトリ名へアクセスし、
ページが表示されることを確認しましょう。
README.mdの内容が表示される方は、
ページのファイルを指定してあげるとOKです。
(例) https://○○.github.io/リポジトリ名/index.html
正常に動くことが確認出来たら、これにて完了となります。
お疲れさまでした。
サンプル
デザインとか手抜きまくってますが、こんな感じで公開できます。
↓ MCBEのサーバーのステータスを検索して表示するだけ
https://mydeacy.github.io/Test-AngularDart/index.html
おわりに
Flutterが流行りだしてDartがアツくなっている(?)今、
なんとなくAngularDartに触れたけど、こりゃいいなって感じ。
リポジトリの内容として公開するものについては特に料金も発生しないこの方法が手軽でいいと思います。
もちろん、本番環境ではお勧めできるかというとできません。
天下のIntellij IDEAのDartプラグインにおいてもAngularDartのサポートがされているので
ぜひ試してみてください。
参考・一部引用の資料
https://angulardart-org-dev.firebaseapp.com/angular/guide/deployment