Getting Started

Installation #

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

Otherwise, follow this guide.

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

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

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

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

npm install @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:

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

// Replace with your own API entrypoint
// For instance if https://example.com/api/books is the path to the collection of book resources, then the entrypoint is https://example.com/api
export default () => (
  <HydraAdmin entrypoint="https://demo.api-platform.com" />
);

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

// Replace with your own API entrypoint
// For instance if https://example.com/api/books is the path to the collection of book resources, then the entrypoint is https://example.com/api
export default () => (
  <HydraAdmin entrypoint="https://demo.api-platform.com" />
);

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

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).

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:

# config/packages/nelmio_cors.yaml

nelmio_cors:
    paths:
        '^/api/':
            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

# config/packages/nelmio_cors.yaml

nelmio_cors:
    paths:
        '^/api/':
            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

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

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

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