ドキュメントAEMAEM チュートリアルAEM Forms のチュートリアル

必要な依存関係のインストール

最終更新日： 2025年3月27日
  • 適用対象：
  • Experience Manager 6.5
  • トピック：
  • アダプティブフォーム

作成対象：

  • 中級
  • ユーザー

React プロジェクトでヘッドレスアダプティブフォームの使用を開始するには、React プロジェクトに次の依存関係をインストールします

  • @aemforms/af-react-components
  • @aemforms/af-react-renderer

package.json を更新して、次の依存関係を含めます。執筆時点では 0.22.41 が現在のバージョンでした

"@aemforms/af-react-components": "^0.22.41",
"@aemforms/af-react-renderer": "^0.22.41",
メモ
このチュートリアルのドロップダウンリストとカードレイアウトは、マテリアル UI ライブラリを使用して作成しました。コードをシステムで動作させるには、適切なマテリアル UI パッケージをダウンロードする必要があります。

プロキシの設定

クロスオリジンリソース共有（CORS）は、アプリがホストされているドメインとは異なるドメインに web ブラウザーからリクエストを送信することを制限するセキュリティメカニズムです。別のドメインでホストされている API からデータを取得しようとすると、CORS エラーが発生することがあります。プロキシを設定すると、CORS の制限を回避して、React アプリから API にリクエストを送信できます。src フォルダー内の setUpProxy.js というファイルで、次のコードを使用しています。パブリッシュインスタンスを指すようにターゲットを変更する必要があります。

const { createProxyMiddleware } = require('http-proxy-middleware');
const proxy = {
    target: 'https://mypublishinstance:4503/',
    changeOrigin: true
}
module.exports = function(app) {
  app.use(
    '/adobe',
    createProxyMiddleware(proxy)
  ),
  app.use(
    '/content',
    createProxyMiddleware(proxy)
  );
};

また、http-proxy-middleware モジュールをインストールしてプロジェクトに追加する必要もあります。

次の手順

埋め込むフォームの取得

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e