Creating a modern web

application using Symfony API

Platform, ReactJS and Redux
by Jesus Manuel Olivas & Eduardo Garcia
@jmolivas | @enzolutions
Who We Are?

Jesus Manuel Olivas

[email protected]
jmolivas
jmolivas
http://drupal.org/u/jmolivas
http://jmolivas.weknowinc.com
Who We Are?

Eduardo Garcia
[email protected]
enzolutions
enzolutions
http://drupal.org/u/enzo
http://enzolutions.com
WeGive
WeAre
WeKnow
 Symfony
API Platform / GraphQL
 ReactJS / Redux / Saga
Ant Design
Symfony Flex
 Symfony Flex … a Composer plugin for Symfony

> Symfony Flex is a Composer plugin that modifies the behavior of

the require, update, and remove composer commands.

> Symfony Flex automates the most common tasks of Symfony

applications, like installing and removing bundles and other
dependencies using recipes defined in a manifest.json file.
Directory structure
API Platform 
Framework
The API Platform Framework

REST and GraphQL

framework to build
modern API-driven
projects
https://api-platform.com/
 Built on the Shoulders of Giants

> Extend the framework with thousands of existing Symfony

bundles and React components.

> The API component includes the Symfony 4 flex, the Doctrine ORM.

Client-side components and Admin based on React and a Docker
configuration ready to startup your project using one single command.

> Reuse all your Symfony, React and Docker skills and benefit of their high
quality docs; you are in known territory.
The API Platform Components

API Schema Admin CRUD

Try API-Platform

# Clone code repository


git clone https://github.com/api-platform/api-platform.git
 Recommendations and adjustments
> Update route prefix at api/config/routes/api_platform.yaml
file.

api_platform:

…

prefix: /api

> Update admin/.env and client/.env files (change protocol and port).

REACT_APP_API_ENTRYPOINT=http://localhost:8080/api
Start containers … and grab water, coffee, or a beer.

# Start containers

docker-compose up -d

# Open browser

open http://localhost/
 Add more formats
Update api/config/packages/api_platform.yaml adding:

formats:

jsonld: [‘application/ld+json'] # first one is the default format

json: ['application/json']

jsonhal: ['application/hal+json']

xml: ['application/xml', 'text/xml']

yaml: ['application/x-yaml']

csv: ['text/csv']

html: ['text/html']
 Add Blog and Tag entities, remove default Greeting entity

> Add new entities to api/src/Entity/ directory:


api/src/Entity/Post.php

api/src/Entity/PostType.php

api/src/Entity/User.php



> Remove default entity

api/src/Entity/Greeting.php
 api/src/Entity/Post.php 1/3
<?php

namespace App\Entity;



use ApiPlatform\Core\Annotation\ApiResource;

use Doctrine\ORM\Mapping as ORM;

use Symfony\Component\Validator\Constraints as Assert;

/**

* @ApiResource

* @ORM\Table(name="post")

* @ORM\Entity

*/

class Post

}
 api/src/Entity/Post.php 2/3
/**

* @ORM\Id

* @ORM\GeneratedValue(strategy="AUTO")

* @ORM\Column(type="integer")

*/

private $id;

/**

* @ORM\Column

* @Assert\NotBlank

*/

public $title = '';


/**

* @ORM\Column

* @Assert\NotBlank

*/

public $body = '';

 api/src/Entity/Post.php 3/3
/**

* @ORM\ManyToOne(targetEntity="PostType")

* @ORM\JoinColumn(name="post_type_id", referencedColumnName="id", nullable=false)

*/

public $type;

public function getId(): int

return $this->id;

}
 Tracking Database changes

# Add dependency

composer require doctrine/doctrine-migrations-bundle

# Execute command(s)

doctrine:migrations:diff

doctrine:migrations:migrate
 Add FOSUserBundle

# Add dependency

composer require friendsofsymfony/user-bundle

composer require symfony/swiftmailer-bundle

https://symfony.com/doc/current/bundles/FOSUserBundle/index.html

https://jolicode.com/blog/do-not-use-fosuserbundle
 Initialize the project
> Drop and Create Database

> Execute Migrations

> Populate Entities with Data

bin/console init

NOTE: Use hautelook/AliceBundle or willdurand/BazingaFakerBundle

 Loading Posts using the Browser

http://localhost:8080/api/posts

http://localhost:8080/api/posts.json

http://localhost:8080/api/posts.jsonld

http://localhost:8080/api/posts/1

http://localhost:8080/api/posts/1.json
 Loading Posts using the CLI

curl -X GET "http://localhost:8080/api/posts" \

-H "accept: application/json"

curl -X GET "http://localhost:8080/api/posts/1" \

-H "accept: application/ld+json"
 ADD Posts from CLI

curl -X POST "http://localhost:8080/api/posts" \

-H "accept: application/ld+json" \

-H "Content-Type: application/ld+json" \

-d '{ "title": "Post create from CLI", "body": "body-

less", "type": "/api/post_types/1"}'
 UPDATE and REMOVE Posts from CLI
curl -X PUT "http://localhost:8080/api/posts/9" \

-H "accept: application/ld+json" \

-H "Content-Type: application/ld+json" \

-d '{ "title": "Updated from CLI"}'

curl -X DELETE "http://localhost:8080/api/posts/10" \

-H "accept: application/json"
 Serialization

> API Platform allows to specify the which attributes of the resource are
exposed during the normalization (read) and denormalization (write)
process. It relies on the serialization (and deserialization) groups feature of
the Symfony Serializer component.

> In addition to groups, you can use any option supported by the Symfony
Serializer such as enable_max_depth to limit the serialization depth.
 Serialization Relations (Post => PostType) 1/2

# api/src/Entity/Post.php & PostType.php

* @ApiResource(attributes={

* "normalization_context"={"groups"={"read"}},

* "denormalization_context"={"groups"={"write"}}

* })
 Serialization Relations (Post => PostType) 2/2

# Add use keyword to class

use Symfony\Component\Serializer\Annotation\Groups;

# Add use keyword to properties

* @Groups({"read"})

* @Groups({"read", "write"})
GraphQL
GraphQL

GraphQL offers significantly more flexibility for integrators.

Allows you to define in detail the only the data you want.

GraphQL lets you replace multiple REST requests with a single

call to fetch the data you specify.

 Add GraphQL

To enable GraphQL and GraphiQL interface in your API, simply require

the graphql-php package using Composer:

composer require webonyx/graphql-php

open http://localhost:8080/api/graphql
 Disable GraphiQL

Update api/config/packages/api_platform.yaml adding:

api_platform:

# ...

graphql:

graphiql:

enabled: false

# ...
 Load resource using GraphQL

post (id:"/api/posts/1") {

id,

title,

body

}
 Load resource using GraphQL form the CLI

curl -X POST \

-H "Content-Type: application/json" \

-d '{ "query": "{ post(id:\"/api/posts/1\") { id,

title, body }}" }' \

http://localhost:8080/api/graphql
 Load resource relations using GraphQL
{

post (id:"/api/posts/1") {

title,

body,

type {

id,

name,

machineName

}
 Load resource relations using GraphQL form the CLI

curl -X POST \

-H "Content-Type: application/json" \

-d '{ "query": "{ post(id:\"/api/posts/1\") { id, title,

body, type { id, name, machineName } }}" }' \

http://localhost:8080/api/graphql
JWT
 JWT Dependencies

# JWT

composer require lexik/jwt-authentication-bundle

JWT Refresh

gesdinet/jwt-refresh-token-bundle
 JWT Events (create)
# config/services.yaml

App\EventListener\JWTCreatedListener:

tags:

- {

name: kernel.event_listener, 

event: lexik_jwt_authentication.on_jwt_created,

method: onJWTCreated

}


# src/EventListener/JWTCreatedListener.php

public function onJWTCreated(JWTCreatedEvent $event)

{

$data = $event->getData();

$user = $event->getUser();

$data['organization'] = $user->getOrganization()->getId();

$event->setData($data);

}
JWT Events (success)
# config/services.yaml

App\EventListener\AuthenticationSuccessListener:

tags:

- {

name: kernel.event_listener, 

event: lexik_jwt_authentication.on_authentication_success,

method: onAuthenticationSuccessResponse

}


# src/EventListener/AuthenticationSuccessListener.php

public function onAuthenticationSuccessResponse(AuthenticationSuccessEvent $event) 

{

$data = $event->getData();

$user = $event->getUser();

$data[‘roles'] = $user->getOrganization()->getRoles();

$event->setData($data);

}
React+Redux+Saga+
AntDesign
dvajs/dva - React and redux based framework. 

https://github.com/dvajs/dva
React / Redux / Saga / AntDesig
 Tips

> Use webpack instead of roadhog.

> Use apollo-fetch for GraphQL calls.

> Use jwt-decode to interact with JWT.

> Use LocalStorage for simple key/values storage.

> Use IndexedDB for encrypted and/or more complex data structures.

> Use Socket-IO + Redis to sync API with ReactJS client.

 Directory Structure
├── package.json
├── src

│   ├── components

│   ├── constants.js

│   ├── index.js

│   ├── models

│   ├── router.js

│   ├── routes

│   └── services

└── webpack.config.js
constants.js
export const API_URL = process.env.API_ENTRY_POINT;

export const GRAPHQL_URL = `${API_URL}/api/graphql`;

export const NOTIFICATION_URL = process.env.NOTIFICATION_URL;

export const NOTIFICATION_ICON = {

info: 'info',

warning: 'exclamation',

error: 'close',

success: 'check'

};
 index.js
import dva from 'dva';

import auth from './models/auth';

import local from './models/local';

import ui from './models/ui';

const app = dva({


…

});



# Register global models

app.model(auth);

app.model(local);

app.model(ui);


app.router(require('./router'));

app.start(‘#root');
router.js 1/2
import …

import AuthRoute from './components/Auth/AuthRoute';

export default function RouterConfig({ history, app }) {


const Login = dynamic({

app,

component: () => import('./routes/Login'),

});
const routes = [{

path: '/posts',

models: () => [

import('./models/posts')

],

component: () => import('./routes/Posts'),

}, {

path: '/posts/:id',

models: () => [

import('./models/projects'),

],

component: () => import('./routes/Posts'),

}];
router.js 2/2
return (

<Router history={history}>

<Switch>

<Route exact path="/" render={() => (<Redirect to="/login" />)} />

<Route exact path="/login" component={Login} />

{

routes.map(({ path, onEnter, ...dynamics }, key) => (
<AuthRoute

key={key} exact path={path}

component={dynamic({

app,

...dynamics,

})}

/>

))

}

</Switch>

</Router>

);

}
src/components/Auth/AuthRoute.js
import {Route, Redirect} from "dva/router";

…
class AuthRoute extends Route {
async isTokenValid() {

# Check for token and refresh if not valid 

}
render() {
return (
<Async
promise={this.isTokenValid()}

then={(isValid) => isValid ?

<Route path={this.props.path} component={this.props.component} />
:
<Redirect to={{ pathname: '/login' }}/>
}
/>
);
};
src/models/posts.js 1/3
import {Route, Redirect} from "dva/router";

import * as postService from '../services/base';

import _map from 'lodash/map';

…
export default {

namespace: ‘posts',

state: {

list: [],

total: 0

},

reducers: {

save(state, { payload: { list, total } }) {

return { ...state, list, total};

},
},
src/models/posts.js 2/3
effects: {

*fetch({ payload: { … }, { call, put }) {

let { list, total } = yield select(state => state.posts);

const graphQuery = `{

posts(first: 10) {

edges {

node {

id, _id, title, body,

type {

id, name, machineName

}

}

}

}

}`;
src/models/posts.js 2/3
#  Async call with Promise support.
const posts = yield call(postService.fetch, 'posts', { … });
const list = _map(posts.data.posts.edges, posts => posts.node)
# Action triggering.
yield put({
type: 'save',
payload: {
list,

total,
},
});
 Directory Structure
src/
├── components
   ├── Auth
   ├── Generic
   ├── Layout
   └── Posts
      ├── ProjectBase.js
      ├── ProjectEdit.js
      ├── ProjectList.js
      └── ProjectNew.js
Any questions?