Multi-FrameworkでReactAppを（内部向けアプリ）
あれ、もうGAになったのかな？
前に外部向け（Experience Cloud）のReact Appを作成してみたので、今度は内部向けも試してみる。今回はSandbox環境にデプロイして動かせるのか試してみよう。
内部向けのsfdxプロジェクトを作成
今回は --template に reactinternalapp を指定する
$ sf template generate project --name wkInReactApp --template reactinternalappnpmパッケージのインストール＆ビルド
READMEにある通りに、作成したプロジェクトのルートディレクトリで、以下を実行する
$ npm install
$ npm run sf-project-setup
> @salesforce/ui-bundle-template-base-sfdx-project@1.135.0 sf-project-setup
> node scripts/sf-project-setup.mjs
Created .gitignore in /Users/takahiro-yonei/dev/salesforce/98_works/wkInReactApp/force-app/main/default/uiBundles/wkInReactApp
SFDX project root: /Users/takahiro-yonei/dev/salesforce/98_works/wkInReactApp
UI bundle directory: /Users/takahiro-yonei/dev/salesforce/98_works/wkInReactApp/force-app/main/default/uiBundles/wkInReactApp
--- npm install ---
npm warn deprecated whatwg-encoding@3.1.1: Use @exodus/bytes instead for a more spec-conformant and faster implementation
npm warn deprecated node-domexception@1.0.0: Use your platform's native DOMException instead
added 1122 packages, and audited 1123 packages in 7s
292 packages are looking for funding
run `npm fund` for details
10 vulnerabilities (3 low, 2 moderate, 4 high, 1 critical)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
--- npm run build ---
> base-react-app@1.59.0 build
> tsc -b && vite build
No default org found. Run "sf org login" to authenticate an org, or "sf config set target-org=<username>" to set a default.
vite v7.3.3 building client environment for production...
✓ 2817 modules transformed.
dist/index.html 0.41 kB │ gzip: 0.27 kB
dist/assets/index-CVqgXMhz.css 75.93 kB │ gzip: 12.48 kB
dist/assets/index-B758UktR.js 563.10 kB │ gzip: 178.89 kB
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 1.70s
すると、uiBundles/wkInReactApp のビルドも完了した模様。
Sandboxにデプロイ
今回はscratch orgを用意するのではなく、sandbox環境を用意した（自社運用環境より作成）。かつては App Domainを有効化 みたいなボタンがあった記憶があるが、そんなものはもう見当たらない。（でもベータ）
sandboxに入れてみる。
$ sf project deploy start --source-dir ./force-app/main/default/uiBundles -o (alias)
› Warning: @salesforce/cli update available from 2.136.8 to 2.139.6.
─────────────── Deploying Metadata ───────────────
Deploying v66.0 metadata to (接続先組織) using the v67.0 SOAP API.
✔ Preparing 75ms
✔ Waiting for the org to respond 485ms
✔ Deploying Metadata 30.97s
▸ Components: 116/116 (100%)
◯ Running Tests - Skipped
◯ Updating Source Tracking - Skipped
✔ Done 0ms
Status: Succeeded
Deploy ID: 0AfAz000009cmKzKAI
Target Org: (接続先組織)
Elapsed Time: 31.53s
デプロイできた。そういえば、 sfdx-project.json で sourceApiVersion が 66.0 だったけどデプロイできた模様。ただ 67.0 を指定しておいた方が良いだろう。
さて、sandbox環境にログインしてみよう...といったところで、肝心のアプリがどこにも見当たらない。
そこで、内部向けのReact Appでは、カスタムアプリケーションから起動していたのを思い出して、カスタムアプリケーションを作成してみれば良いのかも？ということで試してみる。
<?xml version="1.0" encoding="UTF-8"?>
<CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
<formFactors>Large</formFactors>
<isNavAutoTempTabsDisabled>false</isNavAutoTempTabsDisabled>
<label>wkInReactApp</label>
<navType>Standard</navType>
<uiBundle>c__wkInReactApp</uiBundle>
<uiType>Lightning</uiType>
</CustomApplication>さて、デプロイしてみるとv66.0 ではやっぱりダメだった。
$ sf project deploy start -m CustomApplication:wkInReactApp -o (alias)
› Warning: @salesforce/cli update available from 2.136.8 to 2.139.6.
─────────────── Deploying Metadata ───────────────
Deploying v66.0 metadata to (組織名) using the v67.0 SOAP API.
✔ Preparing 140ms
✔ Waiting for the org to respond 1.17s
✘ Deploying Metadata 799ms
▸ Components: 0/1 (0%)
◼ Running Tests
◼ Updating Source Tracking
◼ Done
Status: Failed
Deploy ID: 0AfAz000009cmUfKAI
Target Org: (組織名)
Elapsed Time: 2.12s
Component Failures [1]
## エラーが表示されていましたが、要は以下のことでした。
---> Property 'uiBundle' not valid in version 66.0
sfdx-project.json でバージョンを 67.0 に変えて再トライ。
$ sf project deploy start -m CustomApplication:wkInReactApp -o (alias)
› Warning: @salesforce/cli update available from 2.136.8 to 2.139.6.
─────────────── Deploying Metadata ───────────────
Deploying v67.0 metadata to (組織名) using the v67.0 SOAP API.
✔ Preparing 65ms
✔ Waiting for the org to respond 1.72s
✔ Deploying Metadata 2.30s
▸ Components: 1/1 (100%)
◯ Running Tests - Skipped
◯ Updating Source Tracking - Skipped
✔ Done 0ms
Status: Succeeded
Deploy ID: 0AfAz000009cmcjKAA
Target Org: (組織名)
Elapsed Time: 4.10s
今度はうまくできたみたい。
sandboxにログインして、最後にカスタムアプリケーションへのアクセス権限を付与する。（意外に忘れがちだけれども必要...）
アプリケーションランチャーに表示された。
アプリケーションをクリックすると、無事にアクセスできた。
さいごに
内部向けのReact AppもSandbox環境に無事にデプロイできましたとさ。
sfdx-project.jsonで、バージョンは67.0以降にする- React Appを参照するカスタムアプリケーションも用意する
- カスタムアプリケーションへのアクセス権限も付与する
といったあたりが意外に忘れがちなので、試す際にはご注意を。
ちなみに、カスタムアプリケーションへのアクセス権限がないと、url直指定しても「そんなページは存在しない」とHome画面にリダイレクトされてしまうので、やっぱりカスタムアプリケーションは必要みたい。
あと2026年のDreamforceあたりでReact AppをLEXに組み込める？（Micro Frontend）みたいなことがロードマップにあった気がするので、楽しみに待ちましょう。
