Multi-FrameworkでReactAppを（外部向けアプリ）

拝啓 もうすぐGAでしょうか...

Salesforce Mult-Framework を使用した React による UI 開発

SalesforceでReactアプリを動かせるようになるということで試してみた備忘録を記録してみます。
以下、ご参考

GitHub - trailheadapps/multiframework-recipes: A collection of easy-to-digest code examples for React on Salesforce Platform

A collection of easy-to-digest code examples for React on Salesforce Platform - trailheadapps/multiframework-recipes

GitHubtrailheadapps

公式ドキュメント -> Integrate Your React App with the Agentforce 360 Platform

sfdxプロジェクトを作成

今回は、Externalアプリケーション（外部向けのサイト）を試してみよう、ということで sf template generate project を実行する。
このとき、--template に reactexternalapp を指定する。

$ sf template generate project --name sfdcReactExApp --template reactexternalapp

npmパッケージのインストール&ビルド

$ 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サイト上で動かせそうなので、引き続き試していきたいと思います。（もしかしたら、続く）