Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

React Admin

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $12.00

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Whoa! Look out! Bonus chapter! We know that our API is fully described using the Open API spec. Heck, we can even see it by going to /api/docs.json. This shows all our different endpoints and their fields. It gets this delicious info by reading our code, PHPdoc, and other things. And we know this is used to power the Swagger UI docs page. Our API is also described by JSON-LD and Hydra.

And, both of these types of API docs can be used to power other things.

For example, search for "react admin", to find an open source React-based admin system. This is super powerful and cool... and it's been around for a long time. And the way it works is... amazing: we point it at our API documentation and then... it just builds itself! I think we should take it for a test drive.

Search for "api platform react admin" to find the API Platform docs page all about this. This has some info... but what we're really after is over here. Click "Get Started". This walks us through all the details, even including CORS config if you have that problem.

So... let's do this!

Webpack Encore Setup

If you use the API Platform Docker distribution, this admin area comes pre-installed. But it's also easy enough to add manually. Right now, our app doesn't have any JavaScript, so we need to bootstrap everything. Find your terminal and run:

composer require encore

This installs WebpackEncoreBundle... and its recipe gives us a basic frontend setup. When that's done, install the Node assets with:

npm install

Okay, flip back over to the docs. API Platform has their own Node package that helps integrate with the admin. So let's get that installed. Copy the npm install line - you can also use yarn if you want - paste it in the terminal, and add a -D at the end.

npm install @api-platform/admin -D

That -D isn't super important, but I tend to install my assets as devDependencies.

UX React Setup

To get all of this working, ultimately, we're going to render a single React component into a page. To help with that, I'm going to install a UX package that's... just really good at rendering React components. It's optional, but nice.

Run:

composer require symfony/ux-react

Perfect. Now, spin over and search for "symfony ux react" to find its documentation. Copy this setup code: we need to add it to our app.js file... over here in assets/. Paste... and we don't need all of these comments. I'll also move this code down below the imports.

15 lines assets/app.js
... lines 1 - 12
import './bootstrap';
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));

Awesome! This basically says that it will look in an assets/react/controllers/ directory and make every React component inside super easy to render in Twig. So, let's create that: in assets/, add two new directories: react/controllers/. And then create a new file called ReactAdmin.jsx.

For the contents, go back to the API Platform docs... and it gives us almost exactly what we need. Copy this... and paste it inside our new file. But first, it doesn't look like it, but thanks to the JSX syntax, we're using React, so we need an import React from 'react'.

And... let's make sure we have that installed:

npm install react -D

Passing a Prop to the React Component

Second, take a look at the entrypoint prop. This is so cool. We pass the URL to our API homepage... and then React admin takes care of the rest. For us, this URL would be something like https://localhost:8000/api. But... I'd rather not hardcode a "localhost" into my JavaScript.

Instead, we're going to pass this in as a prop. To allow that, add a props argument... then say props.entrypoint.

import { HydraAdmin } from "@api-platform/admin";
import React from 'react';
export default (props) => (
<HydraAdmin entrypoint={props.entrypoint} />
);

How do we pass this in? We'll see that in just a minute.

Enabling React in Encore

All right, let's see if the system will even build. Fire it up:

npm run watch

And... syntax error! It sees this .jsx syntax and... has no idea what to do with it! That's because we haven't enabled React inside of WebpackEncore yet. Hit Ctrl+C to stop that... then spin over and open webpack.config.js. Find a comment that says .enableReactPreset(). There it is. Uncomment that.

... lines 1 - 8
Encore
... lines 10 - 64
// uncomment if you use React
.enableReactPreset()
... lines 67 - 77

Now when we run

npm run watch

again... it still won't work! But it gives us the command we need to install the one missing package for React support! Copy that, run it:

npm install @babel/react-preset@^7.0.0 --save-dev

And now when we try

npm run watch

... it works! Time to render that React component.

Rendering the ReactAdmin Component

How do we do that? This is the easy part. In src/Controller/, create a new PHP class called AdminController. This is probably going to be the most boring controller you'll ever create. Make it extend AbstractController, and then add a public function called dashboard(), which will return a Response, though that's optional. Above this, add a Route() for /admin.

All we need inside is return $this->render() and then a template: admin/dashboard.html.twig.

... lines 1 - 2
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class AdminController extends AbstractController
{
#[Route('/admin')]
public function dashboard(): Response
{
return $this->render('admin/dashboard.html.twig');
}
}

Cool! Down in the templates/ directory, create that admin/ directory... and inside, a new file called dashboard.html.twig. Again, this is probably one of the most boring templates you'll ever make, at least at the start. Extend base.html.twig and add block body and endblock.

Now, how do we render the React component? Thanks to that UX React package, it's super easy. Create the element that it should render into then add react_component() followed by the name of the component. Since the file is called ReactAdmin.jsx in the react/controllers/ directory, its name will be ReactAdmin.

{% extends 'base.html.twig' %}
{% block body %}
<div {{ react_component('ReactAdmin', {
... line 5
}) }}></div>
{% endblock %}

And here's where we pass in those props. Remember: we have one called entrypoint. Oh, but let me fix my indentation... and remember to add the </div>. We don't need anything inside the div... because that's where the React admin area will magically appear, like a rabbit out of a hat.

Pass the entrypoint prop set to the normal path() function. Now, we just need to figure out the route name that API Platform uses for the API homepage. This tab is running npm... so I'll open a new terminal tab and run:

php bin/console debug:router

Woh! Too big. That's better. Scroll up a bit, and... here it is. We want: api_entrypoint. Head back over, and pass that in.

{% extends 'base.html.twig' %}
{% block body %}
<div {{ react_component('ReactAdmin', {
entrypoint: path('api_entrypoint')
}) }}></div>
{% endblock %}

Moment of truth! Find your browser, change the address to /admin, and... hello ReactAdmin! Woh! Behind the scenes, that made a request to our API entrypoint, saw all of the different API resources we have, and it created this admin! I know, isn't that insane?

We won't go too deep into this, though you can customize it and you almost definitely will need to customize it. But we get a lot of stuff out of the box. It's not perfect: it looks a little confused by our embedded dragonTreasures, but it's already very powerful. Even the validation works! Watch: when I submit, it reads the server-side validation returned by our API and assigned each error to the correct field. And treasures is aware of our filters. It's all here!

If this is interesting to you, definitely check it out further.

All right, team! You did it! You got through the first API Platform tutorial, which is fundamental to everything. You now understand how resources are serialized, how resources relate to other resources, IRIs, etc. All of these things are going to empower you no matter what API you're building. In the next tutorial, we'll talk about users, security, custom validation, user-specific fields and other wild stuff. Let us know what you're building and, if you have any questions, we're here for you down in the comments section.

Alright, friends! Seeya next time!

Leave a comment!

8
Login or Register to join the conversation
FR Avatar

If you are also running into this error:

[Semantical Error] The class "Symfony Contracts\Service Attribute Required" is not annotated with @Annotation.
Are vou sure this class can be used as annotation?
If so, then you need to add @Annotation to the _class_ doc comment of
"Symfony Contracts Service Attribute Required".
If it is indeed no annotation, then you need to add @IgnoreAnnotation("required") to the _class_ doc comment of method Symfony\Bundle\FrameworkBundle\Controller\AbstractController::setContainer()in<"path":"..VsrcV/Con-troller\" "namespace":" ApplIController") (which is being imported from "/Users/asdf/Projects/code-api-platform/start/config/routes yaml"). Make sure there is a loader supporting the "attribute" type.

removing 'doctrine/annotations' might fix it:

symfony composer remove doctrine/annotations
1 Reply

Hey FR,

At what point did you get that error? Did you download the course code, or you're following the course by yourself?

Reply
FR Avatar

I did download the course code and coded along. The error popped up in this chapter or the end of the last chapter.

Reply
weaverryan Avatar weaverryan | SFCASTS | FR | posted 16 days ago | edited

Hey @FR!

There definitely IS some weird stuff happening right now, as the ecosystem transitions away from annotation - e.g. https://github.com/symfony/symfony/issues/48792

But I can't get this to repeat using the code - I've tried doing composer install on the finish code as well as a composer update. We MIGHT have a dependency that needs upgrading, but I can't trigger it. @FR - do you see the error when you run composer instal or do you need to actually use an endpoint?

Thanks!

Reply

Hello,

How can i fetch owner(data who owner is email from token) data if i use JWT token ?

Regards.
Mmx

Reply

Hey @Mepcuk!

So you have a JWT and that JWT contains the email of the user? Is that correct? We'll talk closer to this use-case (though not this exactly) in the next tutorial. But I would:

A) Use the new access_token system
B) In the "access token handler" class you'll create, you'll decode the JWT to get the email
C) Then, return new UserBadge($email). As long as your have an "entity" user provider in security.yaml set up to query from the email property... that's all you need.

Let me know if that helps :).

Cheers!

Reply

Hey @weaverryan!

I think you did not understand my question - I have a Get operation -

#[Get(
    normalizationContext:   ['groups' => ['loan-person:read']],
    security:               "is_granted('ROLE_USER') and object.getEmail() == user.getEmail()",
    securityMessage:        "You don't have permission to view content",
)]

It's work perfect and i can get information if i know ID :))) If not resricted.
But i want to make resourse where i can get all data (relations) related to this user (i login via JWT token)
I try to get Collection but it not worked

#[GetCollection(
    normalizationContext:   ['groups' => ['loan-person:read']],
    security:               "is_granted('ROLE_USER') and collection.getEmail() == user.getEmail()",
    securityMessage:        "You don't have permission to view content in bulk",
)]

Security key did not described in API=platform docs and i don't know how to fetch collection assigned-related to user with this JWT token. You told that in security: possible to write user check, but how?

Reply

Hey @Mepcuk!

I think you did not understand my question

Haha, that happens to me a lot - apologies :)

Let's see... Question: how are you using GetCollection operation? Are you using an ApiFilter to filter by email - e.g. /api/loans?email=foo@example.com? Or something else?

When you use a GetCollection endpoint, the actual "object" is not, of course, a single LoanPerson object, but an array (or technically a Collection) or LoanPerson objects. You tried using collection.getEmail() - but I don't quite understand yet what you were trying to do.

You also said:

i don't know how to fetch collection assigned-related to user with this JWT token.

If I understand correctly, you would like to be able to make a GET /api/loans and receive back only the loans "owned" by the currently-authenticated user. Is that correct? If so, solving this is less about security and more about filtering the data (from a security perspective, all users will have access to fetch their collection of loans, but they should only see their own loans). For this, I would use a "query extension" - https://symfonycasts.com/screencast/api-platform-security/query-extension - to automatically filter this. It doesn't matter that the user is inside of a JWT. It only matters that you fetch the currently-authenticated user, then modify the query based on that user inside the query extension.

Let me know if I was closer this time :)

Cheers!

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.1",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "api-platform/core": "^3.0", // v3.0.8
        "doctrine/annotations": "^1.0", // 1.14.2
        "doctrine/doctrine-bundle": "^2.8", // 2.8.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.2
        "doctrine/orm": "^2.14", // 2.14.0
        "nelmio/cors-bundle": "^2.2", // 2.2.0
        "nesbot/carbon": "^2.64", // 2.64.1
        "phpdocumentor/reflection-docblock": "^5.3", // 5.3.0
        "phpstan/phpdoc-parser": "^1.15", // 1.15.3
        "symfony/asset": "6.2.*", // v6.2.0
        "symfony/console": "6.2.*", // v6.2.3
        "symfony/dotenv": "6.2.*", // v6.2.0
        "symfony/expression-language": "6.2.*", // v6.2.2
        "symfony/flex": "^2", // v2.2.4
        "symfony/framework-bundle": "6.2.*", // v6.2.3
        "symfony/property-access": "6.2.*", // v6.2.3
        "symfony/property-info": "6.2.*", // v6.2.3
        "symfony/runtime": "6.2.*", // v6.2.0
        "symfony/security-bundle": "6.2.*", // v6.2.3
        "symfony/serializer": "6.2.*", // v6.2.3
        "symfony/twig-bundle": "6.2.*", // v6.2.3
        "symfony/ux-react": "^2.6", // v2.6.1
        "symfony/validator": "6.2.*", // v6.2.3
        "symfony/webpack-encore-bundle": "^1.16", // v1.16.0
        "symfony/yaml": "6.2.*" // v6.2.2
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.2
        "symfony/debug-bundle": "6.2.*", // v6.2.1
        "symfony/maker-bundle": "^1.48", // v1.48.0
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/stopwatch": "6.2.*", // v6.2.0
        "symfony/web-profiler-bundle": "6.2.*", // v6.2.4
        "zenstruck/foundry": "^1.26" // v1.26.0
    }
}