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

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

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

利用手順

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

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

.env.json.sample をコピーして .env.json を作成し、ユーザー名・パスワードを記入します。

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

次は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

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

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

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

これで無事にgulpコマンドが実行できるようになりました。

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

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

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

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

デプロイ結果の確認

デプロイされるデモファイルはpkgフォルダの内にあります。

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

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

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

同じくLightning Applicationがデプロイされていることも確認できました。

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

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

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

Lightnnig ComponentのController.jsを変更します。

React処理のindex.jsを変更します。

Gulpコマンドでビルドとデプロイを実行します。

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

静的リソース

Lightning Component

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

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

関連記事

参考記事

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