Building a modern application using Symfony API Platform and GatsbyJS PHP QRO
0 likes146 views
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.
![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']](https://image.slidesharecdn.com/symfony-api-platform-and-gatsbyjs-200323153931/85/Building-a-modern-application-using-Symfony-API-Platform-and-GatsbyJS-PHP-QRO-15-320.jpg)
Building a modern application using Symfony API Platform and GatsbyJS PHP QRO
- 1. by Jesus Manuel Olivas / octahedroid Building a modern application using Symfony API Platform and GatsbyJS
- 3. Agenda Symfony API Platform GraphQL JAMstack GatsbyJS 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.
- 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`, }, },
- 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