Api Platform conference
Register now
v2.6 Getting Started
API Platform Conference
September 19-20, 2024 | Lille & online

The international conference on the API Platform Framework

API Platform Conference 2024: meet the best PHP, JavaScript and API experts

Learn more about the event, register for the conference, and get ready for two days of inspiration, ideas, and knowledge-sharing with our incredible lineup of renowned specialists and advocates.

Register now

# Getting Started

# Installation

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

Otherwise, all you need to install API Platform Admin is a JavaScript package manager. We recommend Yarn (npm is also supported).

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

yarn create react-app my-admin

Go to the directory of your project:

cd my-admin

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

yarn add @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" />

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

            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 yarn start to try it!

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

You can also help us improve the documentation of this page.

Made with love by

Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.

Learn more

Copyright © 2023 Kévin Dunglas

Sponsored by Les-Tilleuls.coop