Getting Started


If you use the API Platform Distribution, API Platform Admin is already installed, you can skip this installation guide.

API プラットフォーム ディストリビューションを使用する場合、API プラットフォーム管理者は既にインストールされているため、このインストール ガイドをスキップできます。

Otherwise, follow this guide.


If you don't have an existing React Application, create one using Create React App:

既存の React アプリケーションがない場合は、Create React App を使用して作成します。

npm init react-app my-admin
cd my-admin

Then, install the @api-platform/admin library:

次に、@api-platform/admin ライブラリをインストールします。

npm install @api-platform/admin

Creating the Admin

To initialize API Platform Admin, register it in your application. For instance, if you used Create React App, replace the content of src/App.js by:

API Platform Admin を初期化するには、アプリケーションに登録します。たとえば、Create React App を使用した場合は、src/App.js の内容を次のように置き換えます。

import { HydraAdmin } from "@api-platform/admin";

// Replace with your own API entrypoint
// For instance if is the path to the collection of book resources, then the entrypoint is
export default () => (
  <HydraAdmin entrypoint="" />

Be sure to make your API send proper CORS HTTP headers to allow the admin's domain to access it.

管理者のドメインが API にアクセスできるように、API が適切な CORS HTTP ヘッダーを送信するようにしてください。

To do so, if you use the API Platform Distribution, update the value of the CORS_ALLOW_ORIGIN parameter in api/.env (it will be set to ^https?://localhost:?[0-9]*$ by default).

これを行うには、API Platform Distribution を使用する場合、api/.env の CORS_ALLOW_ORIGIN パラメータの値を更新します (デフォルトでは ^https?://localhost:?[0-9]*$ に設定されます)。

If you use a custom installation of Symfony and API Platform Core, you will need to adjust the NelmioCorsBundle configuration to expose the Link HTTP header and to send proper CORS headers on the route under which the API will be served (/api by default). Here is a sample configuration:

Symfony と API Platform Core のカスタム インストールを使用する場合は、NelmioCorsBundle 構成を調整して Link HTTP ヘッダーを公開し、API が提供されるルート (デフォルトでは /api) で適切な CORS ヘッダーを送信する必要があります。構成例を次に示します。

# config/packages/nelmio_cors.yaml

            origin_regex: true
            allow_origin: ['^http://localhost:[0-9]+'] # You probably want to change this regex to match your real domain
            allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
            allow_headers: ['Content-Type', 'Authorization']
            expose_headers: ['Link']
            max_age: 3600

Clear the cache to apply this change:


docker compose exec php \
    bin/console cache:clear --env=prod

Your new administration interface is ready! Type npm start to try it!

新しい管理インターフェースの準備ができました! npm start と入力して試してみてください。

Note: if you don't want to hardcode the API URL, you can use an environment variable.

注: API URL をハードコーディングしたくない場合は、環境変数を使用できます。