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
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 yarn 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