Getting Started

If you use the API Platform Symfony variant, good news, API Platform Admin is already installed! 🎉

You can access it by visiting /admin on your API Platform application.

When running locally, you can also click on the “Admin” button of the welcome page at https://localhost.

Here is what it looks like with a simple API exposing a Greetings resource:

If you did not use the Symfony variant of API Platform and need to install API Platform Admin manually, follow this guide.

First, let’s scaffold a React Admin Application by using the Create React Admin tool:

npx create-react-admin@latest my-admin
cd my-admin

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

npm install @api-platform/admin

Now you can use either:

• <HydraAdmin> to connect your app to an API exposing a Hydra documentation
• <OpenApiAdmin> to connect your app to an API exposing an OpenAPI documentation

You can use the <HydraAdmin> component exported by @api-platform/admin to connect your app to an API exposing a Hydra documentation.

If you used Create React Admin, you can replace the content of src/App.tsx 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 const App = () => <HydraAdmin entrypoint="https://localhost" />;

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

Your new administration interface is ready! HydraAdmin will automatically fetch the Hydra documentation of your API and generate CRUD pages for all the resources it exposes.

Type npm run dev to try it!

Tip: There are more props you can pass to the HydraAdmin component to customize the dataProvider or the connection to Mercure. Check the API documentation for more information.

Tip: You may also need to configure your API to set the correct CORS headers. Refer to the Configuring CORS section below to learn more.

You can use the <OpenApiAdmin> component exported by @api-platform/admin to connect your app to an API exposing an OpenAPI documentation.

If you used Create React Admin, you can replace the content of src/App.tsx by:

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

// Replace with your own API entrypoint
export const App = () => (
  <OpenApiAdmin
    entrypoint="https://localhost"
    docEntrypoint="https://localhost/docs.jsonopenapi"
  />
);

Tip: If you don’t want to hardcode the API URL, you can use an environment variable (see Vite.js or Next.js docs).

Your new administration interface is ready! OpenApiAdmin will automatically fetch the Hydra documentation of your API and generate CRUD pages for all the resources it exposes.

Type npm run dev to try it!

Tip: There are more props you can pass to the OpenApiAdmin component to customize the dataProvider or the connection to Mercure. Check the API documentation for more information.

Tip: You may also need to configure your API to set the correct CORS headers. Refer to the Configuring CORS section below to learn more.

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 Symfony variant, 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

Clear the cache to apply this change:

bin/console cache:clear --env=prod

Learn how to add more features to your generated Admin by Customizing the Schema.