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
Then, install the @api-platform/admin
library:
npm install @api-platform/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
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
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.
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