Scaffolding / App generation

[metaclass-nl]

Impressive collection of links! However, i could not find anything about scaffolding/generating react apps. The API Platform client generator can do that from Hydra or OpenApi documentation like those generated by the API Platform core framework. But it has its limitations, some of which i solved in an extended version of the client generator, and documented in the react.js branches of my Tutorial Api Platform.

[markerikson]

Unfortunately I had to basically stop actively maintaining this list a couple years ago. I've asked multiple times for help with keeping it updated, but no one has stepped up to do that.

Just out of curiosity, what aspect of "scaffolding" are you thinking besides just create-react-app or vite or next?

[metaclass-nl]

API Platform produces a working REST (crud&search) api from just Entities and some annotations, and both hydra and openap docs of the api.

The API Platform client generator scaffolds an (allmost) complete working CRUD app from those docs. You can see an example of the code that is generated by the original client generator here:

• react+redux
• next

And here a screenprint of the List produced by the app.

The app was generated from the following hydra doc:

{"@context":
{"@vocab":"https:\/\/localhost\/docs.jsonld#",
"hydra":"http:\/\/www.w3.org\/ns\/hydra\/core#",
"rdf":"http:\/\/www.w3.org\/1999\/02\/22-rdf-syntax-ns#",
"rdfs":"http:\/\/www.w3.org\/2000\/01\/rdf-schema#",
"xmls":"http:\/\/www.w3.org\/2001\/XMLSchema#",
"owl":"http:\/\/www.w3.org\/2002\/07\/owl#",
"schema":"http:\/\/schema.org\/",
"domain":{"@id":"rdfs:domain","@type":"@id"},
"range":{"@id":"rdfs:range","@type":"@id"},
"subClassOf": {
"@id":"rdfs:subClassOf","@type":"@id"},"expects":{"@id":"hydra:expects","@type":"@id"},"returns":{"@id":"hydra:returns","@type":"@id"}},
"@id":"\/docs.jsonld",
"@type":"hydra:ApiDocumentation",
"hydra:title":"Hello API Platform",
"hydra:entrypoint":"\/",
"hydra:supportedClass":[
{"@id":"#Employee","@type":"hydra:Class","rdfs:label":"Employee","hydra:title":"Employee",
"hydra:supportedProperty":[
{"@type":"hydra:SupportedProperty","hydra:property":"@id":"#Employee\/firstName","@type":"rdf:Property","rdfs:label":"firstName","domain":"#Employee","range":"xmls:string"},"hydra:title":"firstName","hydra:required":false,"hydra:readable":true,"hydra:writeable":true},
{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#Employee\/lastName","@type":"rdf:Property","rdfs:label":"lastName","domain":"#Employee","range":"xmls:string"},"hydra:title":"lastName","hydra:required":true,"hydra:readable":true,"hydra:writeable":true},
{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#Employee\/function","@type":"rdf:Property","rdfs:label":"function","domain":"#Employee","range":"xmls:string"},"hydra:title":"function","hydra:required":true,"hydra:readable":true,"hydra:writeable":true},
{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#Employee\/address","@type":"rdf:Property","rdfs:label":"address","domain":"#Employee","range":"xmls:string"},"hydra:title":"address","hydra:required":true,"hydra:readable":true,"hydra:writeable":true},
{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#Employee\/zipcode","@type":"rdf:Property","rdfs:label":"zipcode","domain":"#Employee","range":"xmls:string"},"hydra:title":"zipcode","hydra:required":false,"hydra:readable":true,"hydra:writeable":true},
{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#Employee\/city","@type":"rdf:Property","rdfs:label":"city","domain":"#Employee","range":"xmls:string"},"hydra:title":"city","hydra:required":true,"hydra:readable":true,"hydra:writeable":true},
{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#Employee\/birthDate","@type":"rdf:Property","rdfs:label":"birthDate","domain":"#Employee","range":"xmls:dateTime"},"hydra:title":"birthDate","hydra:required":true,"hydra:readable":true,"hydra:writeable":true,"hydra:description":"Date of birth"},
{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#Employee\/arrival","@type":"rdf:Property","rdfs:label":"arrival","domain":"#Employee","range":"xmls:dateTime"},"hydra:title":"arrival","hydra:required":false,"hydra:readable":true,"hydra:writeable":true,"hydra:description":"Time the employee usually arrives at work"},{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#Employee\/label","@type":"rdf:Property","rdfs:label":"label","domain":"#Employee","range":"xmls:string"},"hydra:title":"label","hydra:required":false,"hydra:readable":true,"hydra:writeable":false,"hydra:description":"Represent the entity to the user in a single string"}
],
"hydra:supportedOperation":[
{"@type":["hydra:Operation","schema:FindAction"],"hydra:method":"GET","hydra:title":"Retrieves Employee resource.","rdfs:label":"Retrieves Employee resource.","returns":"#Employee"},
{"@type":["hydra:Operation","schema:DeleteAction"],"hydra:method":"DELETE","hydra:title":"Deletes the Employee resource.","rdfs:label":"Deletes the Employee resource.","returns":"owl:Nothing"},
{"@type":["hydra:Operation","schema:ReplaceAction"],"expects":"#Employee","hydra:method":"PUT","hydra:title":"Replaces the Employee resource.","rdfs:label":"Replaces the Employee resource.","returns":"#Employee"},
{"@type":"hydra:Operation","expects":"#Employee","hydra:method":"PATCH","hydra:title":"Updates the Employee resource.","rdfs:label":"Updates the Employee resource.","returns":"#Employee"}],"hydra:description":"Class defining entities with data about an Employees"},
{"@id":"#Entrypoint","@type":"hydra:Class","hydra:title":"The API entrypoint","hydra:supportedProperty":[
{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#Entrypoint\/employee","@type":"hydra:Link","domain":"#Entrypoint","rdfs:label":"The collection of Employee resources","rdfs:range":[{"@id":"hydra:Collection"},{"owl:equivalentClass":{"owl:onProperty":{"@id":"hydra:member"},"owl:allValuesFrom":{"@id":"#Employee"}}}
],
"hydra:supportedOperation":[
{"@type":["hydra:Operation","schema:FindAction"],"hydra:method":"GET","hydra:title":"Retrieves the collection of Employee resources.","rdfs:label":"Retrieves the collection of Employee resources.","returns":"hydra:Collection"},
{"@type":[
"hydra:Operation","schema:CreateAction"],"expects":"#Employee","hydra:method":"POST","hydra:title":"Creates a Employee resource.","rdfs:label":"Creates a Employee resource.","returns":"#Employee"}
]
},"hydra:title":"The collection of Employee resources","hydra:readable":true,"hydra:writeable":false}
],
"hydra:supportedOperation":{"@type":"hydra:Operation","hydra:method":"GET","rdfs:label":"The API entrypoint.","returns":"#EntryPoint"}},
{"@id":"#ConstraintViolation","@type":"hydra:Class","hydra:title":"A constraint violation","hydra:supportedProperty":[
{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#ConstraintViolation\/propertyPath","@type":"rdf:Property","rdfs:label":"propertyPath","domain":"#ConstraintViolation","range":"xmls:string"},"hydra:title":"propertyPath","hydra:description":"The property path of the violation","hydra:readable":true,"hydra:writeable":false},
{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#ConstraintViolation\/message","@type":"rdf:Property","rdfs:label":"message","domain":"#ConstraintViolation","range":"xmls:string"},"hydra:title":"message","hydra:description":"The message associated with the violation","hydra:readable":true,"hydra:writeable":false}]},{"@id":"#ConstraintViolationList","@type":"hydra:Class","subClassOf":"hydra:Error","hydra:title":"A constraint violation list","hydra:supportedProperty":[{"@type":"hydra:SupportedProperty","hydra:property":{"@id":"#ConstraintViolationList\/violations","@type":"rdf:Property","rdfs:label":"violations","domain":"#ConstraintViolationList","range":"#ConstraintViolation"},"hydra:title":"violations","hydra:description":"The violations","hydra:readable":true,"hydra:writeable":false}
]}
]}

API Plafrorm generates this and makes a working REST (crud) api from the this Symfony & Doctrine Entity:

namespace App\Entity;

use ApiPlatform\Core\Annotation\ApiResource;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;


/**
 * Class defining entities with data about an Employees
 *
 * @ApiResource(
 *     attributes={"order"={"lastName", "firstName"}}
 * )
 * @ORM\Entity
 */
class Employee
{
    /**
     * @var int The entity Id
     *
     * @ORM\Id
     * @ORM\GeneratedValue
     * @ORM\Column(type="integer")
     */
    private $id;

    /**
     * @var string
     * @ORM\Column(nullable=true)
     * @Assert\Length(max=20)
     */
    private $firstName;

    /**
     * @var string
     * @ORM\Column
     * @Assert\NotBlank
     * @Assert\Length(max=80)
     */
    private $lastName;

    /**
     * @var string
     * @ORM\Column
     * @Assert\NotBlank
     * @Assert\Length(max=40)
     */
    private $function;

    /**
     * @var string
     * @ORM\Column
     * @Assert\NotBlank
     * @Assert\Length(max=80)
     */
    private $address;

    /**
     * @var string|null
     * @ORM\Column(nullable=true)
     * @Assert\Length(max=10)
     */
    private $zipcode;

    /**
     * @var string
     * @ORM\Column
     * @Assert\NotBlank
     * @Assert\Length(max=40)
     */
    private $city;

    /**
     * @var \DateTime Date of birth
     * @ORM\Column(type="date")
     * @Assert\NotNull
     */
    private $birthDate;

    /**
     * @var \DateTime Time the employee usually arrives at work
     * @ORM\Column(type="time", nullable=true)
     */
    private $arrival;

    public function getId(): int
    {
        return $this->id;
    }

    /**
     * @return string|null
     */
    public function getFirstName(): ?string
    {
        return $this->firstName;
    }

    /**
     * @param string|null $firstName
     * @return Employee
     */
    public function setFirstName(?string $firstName): Employee
    {
        $this->firstName = $firstName;
        return $this;
    }

    /**
     * @return string
     */
    public function getLastName(): string
    {
        return $this->lastName;
    }

    /**
     * @param string $lastName
     * @return Employee
     */
    public function setLastName(string $lastName): Employee
    {
        $this->lastName = $lastName;
        return $this;
    }

    /**
     * @return string
     */
    public function getFunction(): string
    {
        return $this->function;
    }

    /**
     * @param string $function
     * @return Employee
     */
    public function setFunction(string $function): Employee
    {
        $this->function = $function;
        return $this;
    }

    /**
     * @return string
     */
    public function getAddress(): string
    {
        return $this->address;
    }

    /**
     * @param string $address
     * @return Employee
     */
    public function setAddress(string $address): Employee
    {
        $this->address = $address;
        return $this;
    }

    /**
     * @return string|null
     */
    public function getZipcode(): ?string
    {
        return $this->zipcode;
    }

    /**
     * @param string $zipcode|null
     * @return Employee
     */
    public function setZipcode(?string $zipcode): Employee
    {
        $this->zipcode = $zipcode;
        return $this;
    }

    /**
     * @return string
     */
    public function getCity(): string
    {
        return $this->city;
    }

    /**
     * @param string $city
     * @return Employee
     */
    public function setCity(string $city): Employee
    {
        $this->city = $city;
        return $this;
    }

    /**
     * @return \DateTime
     */
    public function getBirthDate(): \DateTime
    {
        return $this->birthDate;
    }

    /**
     * @param \DateTime $birthDate
     * @return Employee
     */
    public function setBirthDate(\DateTime $birthDate): Employee
    {
        $this->birthDate = $birthDate;
        return $this;
    }

    /**
     * @return \DateTime|null
     */
    public function getArrival(): ?\DateTime
    {
        return $this->arrival;
    }

    /**
     * @param \DateTime|null $arrival
     * @return Employee
     */
    public function setArrival(\DateTime $arrival=null): Employee
    {
        $this->arrival = $arrival;
        return $this;
    }

    /**
     * Represent the entity to the user in a single string
     * @return string
     */
    function getLabel() {
        return $this->getLastName(). ', '. $this->getFirstName();
    }

}

The tutorial adds i18n, l10n, searching, sorting, authenthication, authorization and a report. The accompanying extended client generator only adds i18n and l10n (react and next), searching and sorting (only for react yet).

I am looking for a way to inform the React community, about the existence of this. It may especially be nice for developers that just learnt react and redux and need some practical experience with building a REST app. The tutorial is hands on and each chapter/branch contains the code resulting from following the instructions of the previous one.