webstromでMEAN.IOをデバッグ

MEAN.IOのルートでgultしてみると

デフォルトはdevelopになっていて、

勝手にDebuggerを立ち上げてくれる。

なので、WebstormでやるべきことはこのDebuggerを受け取ること。

なので、

Edit Configurations -> Add New Configuration -> Node.js Remote Debug

Run_Debug_Configurations

といった感じでせっていたら、Debuggerを拾ってくれるはず!

ッと思ったら。ブレイクポイントで止まってくれない。

どうやらNode Debuggerをnode –debug-brk ~~~ で立ち上げないとDebuggerを拾ってくれないみたいです。

ということで、修正。

修正すべきところは、

/gulp/development.js

です。

gulpを立ち上げ直す。

Good!

 

MEAN.IOのデフォルトで入ってるmeanio-usersを引っ張り出してカスタマイズ

MEAN.IO

/node_modules/meanio-users/*

にユーザ登録などを行うパッケージが入っている、

node_modules以下にあるものをカスタマイズするのは抵抗があるので、これを

/packages/custom/にusersというフォルダを作ってそこに移動する。

node_modules上からmeanio-usersは消す。

好き好きだが、一応

/packages/custom/…./packages.jsonからもdependenciesを削除する。

/packages/custom/…./server/views/includes/foot.html

でパッケージをインクルードしていく。

これでOK。

 

MEAN.IOではEclipseは、もう限界。。WebStormに乗り換え。

いままで8年ぐらい常にEclipseをプラットフォーム使ってきたのですが。

MEAN.IOを使うには、思うにEclipseは限界です。

うまくプラグインしてってもどうしても埋め合わせられない穴がある

っという結論に至りました。

今後はWebStormを使います。

WebStormの最大のデメリットは有料。

US $ 129.00 /1st year
US $ 103.00 /2nd year
US $ 77.00 /3rd yr onwards

 

つまり、はじめは129ドル。

1月間は試用期間があるので、それを試してみます。

 

 

Angular-materialで言語切替&クッキー保存&デフォルトはブラウザ言語

パッケージをインストール

HTML

AngularJS

 

 

 

 

 

MEAN.IOってフロントエンドをChromeの開発ツールでデバッグしづらい

先に書いたように

MEAN.IOは使用するjavascriptを/bundle/app.jsにまとめてくれる。

なので、軽くなるのだがその分デバッグがしづらい。

Chromeの開発ツールを使うのは不可能。。

node_componentsの中身をデバッグする必要はないので、そこがまとめられているのは

ヨシとして、

packagesの中身がまとめられるのはやめる。

デフォルトで/app.js の45行目あたりpackages内をまとめる部分をコメントアウト

/packages/custom/…./server/views/includes/foot.html

にハードコーディングでインサートしていく。

 

 

MEAN.IOでnpmでjavascriptのパッケージインストール・インポート

件名の通り

まずは、入れたいパッケージをnpmでインストール

/app.jsの上の方に

して

angular-translateを/bundle/app.jsにもとめて入れ込んでくれる。

mean.ioのデフォルトでインストールした状態なら

/packages/custom/…./server/views/includes/foot.html

と書かれているはず。

gulpでbowerのパッケージを自動挿入

gulp-injectを使う。

インストール(開発環境だけでいいので、–save-dev)

挿入されるhtmlを編集

パッケージの挿入先を指し示すためgulpfile.js編集

取り敢えずテスト的にbower

リターン連続

でangular-translateをインストール

bower.jsonを確認

dependenciesに挿入されて

bower_componentsフォルダにangular-translateがインストールされているのを確認。

では、gulp wiredepを実行。

↓はhead.html, foot.htmlに設置

これでちゃんとhead.html, foot.htmlにbowerからのcss, javascriptが挿入されていることを確認。

基本は相対パスで挿入されてしまう。

絶対パスがいいので↓のようにgulpfile.jsを変更

 

 

 

AWSのCodeCommitはまだ未成熟

AWSの提供するサービスでCodeCommitと言うものがある、

これは要はGitHubみたいな動きをしてくれるのだが。。

ちょっと何かと惜しくて。

煩わしいです。

私の場合、AWSを使っているからといって使ってみたら

Macからgit cloneをしようとしても403エラーを回避できなくなってしまいました。

Macの403エラー回避方法がAWSオリジンのサイトに乗っているので、

その方法でKeyChainなどをいじったり、やってみたのだが、全く効果なし。

残念ですが、取り敢えず今のところCodeCommit自体を使うことが間違えという結論に至りました。

 

 

MEAN.IOをVagrantの共有フォルダで使うのに向いてない

今までの開発の方式にならってMEAN.IOを使うのにも

Vagrantの共有フォルダで開発をしていたが、結論から言うと

MEAN.IOを使うときはVagrantの共有フォルダは絶対に使わないほうがいい。

MEAN.IOの折角の便利な機能が全然使えなくなるし、

エラーが連発する。

工夫したら使えるようにする事もできなくはないが、

断然効率が悪い。

原因の多くは、Vagrantの共有フォルダでchmodができないことにある。

頑張って結局できなかったことがおおくて、悔しかったので記録しておく。