Plone and Volto in a Jamstack project
0 likes384 views
1) The document discusses using Plone and Volto as a backend with GatsbyJS as a frontend Jamstack project. It describes using Plone for content authoring and hierarchical permissions, and GatsbyJS for a fast responsive frontend. 2) It provides an example of a University of Jyväskylä study guide site built with these technologies, containing 6000 pages in two languages. Plone was used for no-code content customizations and Volto for auto-complete widgets. 3) While GatsbyJS provided many benefits, the author notes it requires practice to fully utilize and overcome challenges like long build times and memory usage during builds. Using Volto in Gatsby
![datakurre
GatsbyJS: Query Connected Pages with GraphQL
{
...
pages: allPloneDocument(filter: {
sisu_ids: { in: [$id] },
sisu_topic: { token: { eq: "avoin-subject" } }
}) {
edges {
node {
...VoltoDocument
}
}
}
...
}
9](https://image.slidesharecdn.com/plone-and-volto-in-jamstack-project-201228070112/85/Plone-and-Volto-in-a-Jamstack-project-12-320.jpg)
![datakurre
Advanced Configuration
{
resolve: 'gatsby-source-plone',
options: {
baseUrl: 'https://plonedemo.kitconcept.com',
searchParams: {
path: [
'/en/'
],
},
token: process.env.PLONE_TOKEN,
},
},
16](https://image.slidesharecdn.com/plone-and-volto-in-jamstack-project-201228070112/85/Plone-and-Volto-in-a-Jamstack-project-21-320.jpg)
Plone and Volto in a Jamstack project
- 1. Plone and Volto in a Jamstack Project Plone Conference 2020 Asko Soukka 7.12.2020 +
- 2. Backend: Plone & Volto 1
- 4. datakurre Author Asko Soukka Software architect at University of Jyväskylä Digital Services Background • Python developer since 2002 • Plone developer since 2004 • Full-time professional since 2008 • GatsbyJS user since 2018 3
- 6. datakurre SISU One student information management system to rule them all, but... • every organisation shall do their own integrations • using granular REST API with deep JSON responses Branded study guide DIY • data in tables with JSONB column per endpoint • custom API with database views and Hasura • crafted with GatsbyJS + GraphQL source plugin 4
- 7. Let there be CMS
- 8. datakurre Study Guide for University of Jyväskylä Open University Starting points • 3rd party student information management system • limited content authoring options Requirements • rich content authoring options • hierarchical permission management • merge structural data with custom content • fast and responsive end-user experience 5
- 9. datakurre Study Guide for University of Jyväskylä Open University Solution https://www.avoin.jyu.fi/opinto-opas/fi/avoinyo/ Ingredients • Plone 5.2 • Volto • GatsbyJS Numbers • 6 000 HTML pages • × two languages • 760 Volto pages 6
- 10. Plone: No-Code Content-Type Customizations 7
- 11. Volto: Auto-Complete Widgets with Custom Vocabularies 8
- 12. datakurre GatsbyJS: Query Connected Pages with GraphQL { ... pages: allPloneDocument(filter: { sisu_ids: { in: [$id] }, sisu_topic: { token: { eq: "avoin-subject" } } }) { edges { node { ...VoltoDocument } } } ... } 9
- 13. datakurre ReactJS: Render Volto Layouts with React Components import VoltoDocument from '../components/VoltoDocument'; ... {props.data.pages.edges.map(({ node }) => ( <VoltoDocument key={node.id} data={node} /> ))} ... 10
- 14. Backend: Plone & Volto 11
- 16. GatsbyJS recap
- 17. datakurre JavaScript, API & Markup GatsbyJS is a ReactJS-based site generator Why GatsbyJS? • multi-source plugin architecture • GraphQL based data lookup • convention over configuration • seamless developer experience • comprehensive documentation 13
- 19. datakurre gatsby-source-plone https://github.com/collective/gatsby-source-plone/ Features • supports default types and most TTW types • supports files and images from default types • supports richtext from default types • resolves linked objects from default types • incremental updates by modification date 14
- 20. datakurre Basic Configuration { resolve: 'gatsby-source-plone', options: { baseUrl: 'https://plonedemo.kitconcept.com/en', }, }, { resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/static`, }, }, 15
- 21. datakurre Advanced Configuration { resolve: 'gatsby-source-plone', options: { baseUrl: 'https://plonedemo.kitconcept.com', searchParams: { path: [ '/en/' ], }, token: process.env.PLONE_TOKEN, }, }, 16
- 22. GraphiQL 17
- 23. datakurre Not Only Rainbows and Unicorns Full “GatsbyJS experience” requires practice • query connected pages, images and files • replace inline links with GatsbyJS links • replace inline images with GatsbyJS images • replace file links with direct download Using @plone/volto seemed like a good idea... • required Webpack overrides to be importable • could not be used for images and links 18
- 24. datakurre Not Only Rainbows and Unicorns GatsbyJS – the ugly parts • GraphQL source plugin cannot cache • build may take hours • build may take gigabytes of memory • build result is readonly • monorepo is painful to follow 19
- 25. Discussion