Multi-FrameworkでReactAppを（外部向けアプリ）
拝啓 もうすぐGAでしょうか...
Salesforce Mult-Framework を使用した React による UI 開発
SalesforceでReactアプリを動かせるようになるということで試してみた備忘録を記録してみます。
以下、ご参考
trailheadapps
公式ドキュメント -> Integrate Your React App with the Agentforce 360 Platform
sfdxプロジェクトを作成
今回は、Externalアプリケーション（外部向けのサイト）を試してみよう、ということで sf template generate project を実行する。
このとき、--template に reactexternalapp を指定する。
$ sf template generate project --name sfdcReactExApp --template reactexternalappnpmパッケージのインストール&ビルド
$ cd sfdcReactExApp
$ cd force-app/main/default/uiBundles/sfdcReactExApp
$ npm install
$ npm run buildデプロイする前に一度ビルドしておく必要があるのでuiBundles/ 配下まで移動してビルド実行する。
scratch orgを作成してデプロイ
みんな大好きscratch orgを作成しておこう。プロジェクトのルートディレクトリまで戻って以下実行
$ sf org create scratch -f config/project-scratch-def.json -a wk.mf --set-default -v (devhub組織を指定)
$ sf project deploy startまぁ色々エラーが出る
色々設定できてないからそりゃそうだ、と。
Multi-Frameworkの有効化、Experience Cloudサイトの有効化...など設定が漏れている。config/project-scratch-def.json を以下の通りに変更して、再度scratch orgを作成する。
{
"orgName": "My Saleforce Org",
"edition": "Developer",
"features": ["Communities","EnableSetPasswordInApi"],
"settings": {
"lightningExperienceSettings": {
"enableS1DesktopEnabled": true
},
"mobileSettings": {
"enableS1EncryptedStoragePref2": false
},
"communitiesSettings": {
"enableNetworksEnabled": true
},
"experienceBundleSettings": {
"enableExperienceBundleMetadata": true
},
"UIBundleSettings": {
"webAppOptIn": true
}
}
}
Experience CloudとMulti-Frameworkは有効化された状態で作成できたので、再度デプロイしてみると...
うむ。まだエラーがある。想定の範囲内。
claude codeに聞いてみると
Digital Experiences を有効化しても、org 側に以下がまだ1つも存在していません:
*CommunitiesLanding等の標準コミュニティ VF ページ → 0件
* Site → 0件
* Network → 0件
これは「鶏と卵」問題ですCommunitiesLanding/CommunitiesLogin/CommunitiesSelfRegといった標準 VF ページは、Digital Experiences の有効化だけでは作られません。org 内で最初の Experience サイト（コミュニティ）を1つ作成したときに初めて自動プロビジョニングされます。
ということで、サイトに入って何か適当な名前（被らない名前）で1つ作ってみる。Build Your Own(LWR)を選んで適当なものを作って再度デプロイしてみると...
今度はデプロイできたっぽい。管理画面もこんな感じになった。
フレームワークが React になるのか。
そしてビルダーへのリンクはない。まぁそれはそうか。
URLにアクセスすると、なるほどReactアプリだ。
Browse All Accounts をクリックすると、こんな画面に。
Sample Account for Entitlements をクリックすると
Experience Cloudサイトが、いきなりSPAになった。
とりえあえず、Experience Cloudサイト上で動かせそうなので、引き続き試していきたいと思います。（もしかしたら、続く）
