Diving into API Platform — Part 2

Update 30.09.2017: Docs that now address the issue in this post

This is picking up from the first part.

First up a diff that integrates dumb-init, although I am hopeful this will be solved in docker itself soon (it is in the client already but not available for services — relevant PR that is needed for this to be enabled in docker-compose)

Again with the handyalias sf="docker-compose exec app bin/console" after setting up Book.phpandReview.php models according to getting started docs.

sf doctrine:generate:entities AppBundle #create accessor methods
sf doctrine:schema:update --force

First little snag, I had to

docker exec -it apiplatform_app_1 /bin/ash
/srv/api-platform/var/logs # rm /srv/api-platform/var/logs/dev.log

to clear permission error accessing http://localhost/app_dev.php but now I am greeted with the new endpoints:

Book and Review Endpoints added

Happily adding entities through the web-UI and learning about Hydra and smart clients.

It´s pretty easy to get rid of the ugly SQL-errors with annotated validation thats very nice!

use Symfony\Component\Validator\Constraints as Assert;
...
/**
 * @var string The title of this book.
 *
 * @ORM\Column
 * @Assert\NotBlank
 */
private $title;

Next stop fancy Material Design administration interface:

Intro reads like we got nothing left to do ourselves let´s see! (lpt: open some funky tunes for this part)

create-react-app my-admin
cd my-admin
yarn add @api-platform/admin

edit src/App.js to

import React, { Component } from 'react';
import { HydraAdmin } from 'api-platform-admin';

class App extends Component {
    render() {
        return <HydraAdmin entrypoint="http://localhost"/> // Replace with your own API entrypoint
    }
}

export default App;

then yarn start ..sadtrumpet.wav…

Failed to compile
./src/App.js
Module not found: Can't resolve 'api-platform-admin' in '/Users/armin/www/api-platform/my-admin/src'

ok changed App.js import to

import { HydraAdmin } from '@api-platform/admin';

now I´m getting hit by CORS issue

Failed to load http://localhost/: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains the invalid value 'null'. Origin 'http://localhost:3000' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

this fix seems to be included already so let`s be dirty and edit parameters.yml to:

parameters:
...
    cors_allow_origin: '*'

Next up react error

Uncaught Error: Element ref was specified as a string (listItem) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

It seems I gotta downgrade React… *sigh*

"react": "^15.6.1",
"react-dom": "^15.6.1"

to(in package.json)

"react": "~15.5.4",
"react-dom": "~15.5.4"

and yarn upgrade does NOT work versions get raised again.

The Solution was to remove those explicit requirements completly!

package.json:

{
  "name": "my-admin",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@api-platform/admin": "^0.1.15",
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

App.js:

import React, { Component } from 'react';
import { HydraAdmin } from '@api-platform/admin';

class App extends Component {
    render() {
        return <HydraAdmin entrypoint="http://localhost"/> 
    }
}

export default App;

yarn upgrade and yarn start and finally I can enjoy the lovely React admin UI built with Material Components:

The Out-of-the-Box React admin interface

To be continued!