読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:react-lightning-component-templateを試してみました

react-lightning-component-templateを試してみました。"gulp","webpack","jsforce"をつかったSalesforceの開発環境の構築について確認できます。


SALESFORCE DEVELOPERS.INFOの6月20日の記事で紹介されていたものです。

f:id:tyoshikawa1106:20160702225932p:plain

利用手順

まずはgit cloneから始めます。

$ git clone git@github.com:zaki-yama/react-lightning-component-template.git

f:id:tyoshikawa1106:20160702230114p:plain


.env.json.sample をコピーして .env.json を作成し、ユーザー名・パスワードを記入します。
f:id:tyoshikawa1106:20160702230406p:plain


ログイン情報を保持する.env.jsonファイルは.gitignoreをつかってgit管理の対象から除外しています。これでログイン情報を外部に公開せずに済みます。
f:id:tyoshikawa1106:20160702231355p:plain


次はnpm installを実行します。

$ npm install


それからgulpコマンドを使うので、まだ入れていない場合は実行します。

$ npm install -g gulp


次のコマンドでビルドとデプロイできます。

$ gulp


自分の環境で実行したときに次のエラーが発生しました。

fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.


エラーメッセージで検索してみたところ、Nodeのバージョンが6系の場合に発生するエラーみたいです。


nodebrewをつかっているので次の手順でバージョンを変更できました。

// バージョン確認 -> v6.0.0でした
$ node -v
// インストール済みのバージョン確認
$ nodebrew ls
// 利用バージョン変更 -> 5系に変更
$ nodebrew use v5.5.0


変更後は再度npm installコマンドを実行します。(node_modulesフォルダを削除してから実行)


上記対応後に再度実行してみるともう一つエラーが発生しました。

resolve module react-lightning-design-system

f:id:tyoshikawa1106:20160702233704p:plain


react-lightning-design-systemがありませんというエラーでした。react-lightning-design-systemはReact開発でSLDSを簡単に適用できるようにしてくれるライブラリです。


次のコマンドでインストールします。--saveオプションでpackage.jsonにも追加しておきます。

$ npm install react-lightning-design-system --save

f:id:tyoshikawa1106:20160702233450p:plain


これで無事にgulpコマンドが実行できるようになりました。
f:id:tyoshikawa1106:20160702233626p:plain


実行結果を確認するとPolling time outが発生していました。

gulp-notify: [Error running Gulp] Error:Polling time out. Process Id = 0Af10000005BxxgCAC


time outということなので多分たまたま発生しただけだと思います。もう一度実行してみると解決していました。
f:id:tyoshikawa1106:20160702234125p:plain


ちなみにデプロイ処理はJSforceからメタデータAPIを実行して行っています。
f:id:tyoshikawa1106:20160703002251p:plain

デプロイ結果の確認

デプロイされるデモファイルはpkgフォルダの内にあります。
f:id:tyoshikawa1106:20160702234457p:plain


デプロイ実行後はpkgフォルダ内のファイルが静的リソースに登録されていることを確認できます。
f:id:tyoshikawa1106:20160702234306p:plain


ファイルをダウンロードして中身を確認してみるとビルド後のファイルがきちんと格納されていました。
f:id:tyoshikawa1106:20160702235241p:plain


また、開発者コンソールからLightning Componentがデプロイされていることを確認できます。
f:id:tyoshikawa1106:20160702234641p:plain


同じくLightning Applicationがデプロイされていることも確認できました。
f:id:tyoshikawa1106:20160702234754p:plain


ということでGulp経由でデプロイすることができました。

ファイルを更新して再度デプロイ

新しいファイルをデプロイすることを確認できたので、次はファイルを更新して再デプロイする流れについて確認してみました。

Lightnnig ComponentのController.jsを変更します。
f:id:tyoshikawa1106:20160702235548p:plain


React処理のindex.jsを変更します。
f:id:tyoshikawa1106:20160703000356p:plain


Gulpコマンドでビルドとデプロイを実行します。
f:id:tyoshikawa1106:20160703000514p:plain


デプロイ経過を確認してみると無事に更新されていました。

静的リソース

f:id:tyoshikawa1106:20160703000611p:plain

Lightning Component

f:id:tyoshikawa1106:20160703000644p:plain


ということでファイルの変更と再デプロイを無事に実行することができました。


以上がreact-lightning-component-templateで確認できたことです。GulpやWebpackをつかったビルドとデプロイを行うSalesforceの開発環境構築についてすごく勉強になりました。

関連記事

参考記事

こちらもGulpとかでデプロイする方法についてまとめてありました。