This document discusses building a modern application using Symfony API Platform and GatsbyJS. It introduces Symfony API Platform as a framework for building API-driven projects with REST and GraphQL support. It also discusses using GatsbyJS, a React framework, to build fast websites and apps that can pull data from the Symfony API via GraphQL. User authentication with JWT and integrating the two frameworks is also covered at a high level.

1. by Jesus Manuel Olivas / octahedroid
Building a modern application using
Symfony API Platform and GatsbyJS

2. Jesus Manuel Olivas
jmolivas.com
@jmolivas

3. Agenda
Symfony API Platform
GraphQL
JAMstack
GatsbyJS
Web Development 101

4. Web Development 101

5. Traditional monolithic stack
Visitor Server
Database

6. Server render (traditional)
Server Client

7. SPA (client side)
Server Client

8. The Modern Stack (JAMstack)
Visitor CDN

10. JAMstack (pre-render markup)
Server ClientBuild Server

11. The API Platform Framework
REST and GraphQL
framework to build modern
API-driven projects

12. The API Platform Framework
https://github.com/api-platform/api-platform
The server skeleton includes the
Symfony microframework and
the Doctrine ORM.

13. The API Platform Components

14. Build a fully-featured
hypermedia or GraphQL API
in minutes.
The API Components

15. api/config/packages/api_platform.yaml
API formats
formats:
jsonld: [‘application/ld+json'] # first one is the default
json: ['application/json']
jsonhal: ['application/hal+json']
xml: ['application/xml', 'text/xml']
yaml: ['application/x-yaml']
csv: ['text/csv']
html: ['text/html']

16. console make:entity
Add New Entity

17. use DoctrineORMMapping as ORM;
use RamseyUuidUuid;
use GedmoTimestampableTraitsTimestampableEntity;
class EntityBase
{
use TimestampableEntity;
/**
* @var string
* @ORMColumn(name="uuid", type="string")
!*/
protected $uuid;
public function getUuid()
{
return $this!->uuid;
}
YourEntity extends EntityBase 1/2

18. /**
* @GedmoTimestampable(on="create")
* @ORMColumn(type="datetime", nullable=true)
!*/
protected $createdAt;
/**
* @GedmoTimestampable(on="update")
* @ORMColumn(type="datetime", nullable=true)
!*/
protected $updatedAt;
public function !__construct()
{
$this!->uuid = Uuid!::uuid4()!->toString();
$this!->createdAt = new DateTime();
$this!->updatedAt = $this!->createdAt;
}
}
YourEntity extends EntityBase 2/2

19. console make:migration
console doctrine:migrations:migrate
Sync entities with DB

20. GraphQL is an open-source
data query and manipulation
language for APIs.
GraphQL

21. To enable GraphQL and GraphiQL interface
in your API, simply require
“webonyx/graphql-php”
package using composer
GraphQL
GraphQL demo

22. User Authentication
Allowing users to authenticate and identify
themselves, so that some or all of the page can
be personalized for them.
Examples include displaying a user's name and
avatar, or showing authorized users private
content.

23. Login using JWT

24. FOSUserBundle || Doctrine User Provider
LexikJWTAuthenticationBundle
JWTRefreshTokenBundle
User Authentication

25. Use Doctrine ORM Filters
Register EventListeners for JWT & Auth
Use Serialization Groups (encode/decode)
Create custom GraphQL Queries or Mutations
Tips

26. GatsbyJS
Gatsby is a free and open source
framework based on React that
helps developers build blazing
fast websites and apps

27. package.json
"dependencies": {
"gatsby": "^2.17.11",
"gatsby-source-graphql": "^2.1.28",
“react": "^16.11.0",
"react-dom": "^16.11.0"
},

28. gatsby-config.js
{
resolve: "gatsby-source-graphql",
options: {
typeName: "Symfony",
fieldName: "symfony",
url: `${process.env.SYMFONY_URL}/graphql`,
},
},

29. GatsbyJS
Gatsby demo

30. Centralize data with GraphQL
Easier to explore
Single source of truth
More scalable & team-friendly
Consistent, shareable dev workflow

31. Go Static for everything else
Blazing fast performance
Simpler deployment flow
Immutable deployments
Reduced DevOps overhead

32. Resources
https://api-platform.com/docs
https://symfonycasts.com/tracks/rest
https://www.gatsbyjs.org/docs/

33. Thank you.
Any Questions?