$30 off During Our Annual Pro Sale. View Details »

Go headless but don't lose your head

Go headless but don't lose your head

Use NextJS+Headless Silverstripe CMS. Talk at Virtual StripeCon Europe 2020

Andy Adiwidjaja

September 24, 2020

More Decks by Andy Adiwidjaja

Other Decks in Technology


  1. Go headless, but don’t lose your head Andy Adiwidjaja Virtual

    StripeCon Europe, 24.09.2020
  2. Headless is here to stay and Silverstripe CMS is the

    best open source solution
  3. Overview Why SSR? Should I care? Why headless Silverstripe CMS?

    How can I start?
  4. Why SSR? Should I care? Is it worth it?

  5. Me - had projects as a NextJS developer - was

    forced to work with strange backends - would like to use Silverstripe CMS - launches own projects with NextJS+SilverstripeCMS
  6. Going SSR Disadvantages of Single Page Apps: - SEO -

    Browser history - Time to first render Solutions: - Server-side-rendering - Static generators (Graphic: microsoft.com)
  7. Yeah, right Stacey Trooster StripeCon EU 2019

  8. Headless CMS, React, SSR? 2001 2003 Plain PHP, Templating with

    Smarty 2010 CMS, SASS, JQuery, Ajax 2015 CMS/Framework, SASS, React / Angular 2020 Plain HTML, Dreamweaver Templates
  9. Demo https://kulturellebildung-sh.de/ Loads pages as XHR Loads HTML on Reload

    Works without JavaScript!
  10. NextJS getStaticProps getStaticPaths: - Fetch data at Build time New:

    “static can also be dynamic” - getStaticProps can revalidate - getStaticPaths can have fallback getServerSideProps: - Fetch data on each request
  11. NextJS SSR

  12. NextJS dynamic pages Default NextJS logic: pages in /pages folder.

    Former solution: Custom server.js rewriting to /pages/index.tsx Now: /pages/[[...page]].tsx
  13. So, why Silverstripe CMS as headless CMS?

  14. Headless CMS Criteria: Simple setup Mostly config Low maintenance Frontend-independent,

    but: Pages Page elements Navigation Custom Data Hosted CMS (examples): Contentful Kentico GraphCMS Expensive, Limitations. Self-hosted CMS: Strange new players, all old players with APIs
  15. Silverstripe CMS - dev/build - Pages with Elemental - ModelAdmin

    - Backend functionality - Backend integration! Basic admin interfaces are a matter of configuration, but configuration in code! Strength of Silverstripe: Create solutions! class Actor extends DataObject { private static $db = [ “Name” => “Varchar(255) ]; } class ActorAdmin extends ModelAdmin { private static $managed_models = [ Actor::class, ]; private static $url_segment=”actor”; private static $menu_title=”Actors”; }
  16. Example: DBRD React Frontend Headless Silverstripe CMS Sync with MS

    Dynamics 365 (SOAP) ModelAdmin for Control No pages, assets etc. Easy to map models in and out
  17. How? https://github.com/adiwidjaja/silverstripe-nextjs-starter Demo - Elements - Preview - RedirectorPage

  18. File structure .storybook Storybook config backend Silverstripe CMS pages NextJS

    pages public NextJS static files src JavaScript code No templates!
  19. Setup > git clone git@github.com:adiwidjaja/ silverstripe-nextjs-starter.git demo > cd demo

    > vi .env # Configuration > cd backend && composer install # PHP dependencies > cd .. > yarn # JS dependencies > yarn dev # Dev server
  20. JavaScript Stack - NextJS - React - Typescript - Styled-components

    - Storybook const FaqElementStyled = styled.div``; const TextContent = styled.div` display: ${props => (props.visible ? 'block' : 'none')}; `; const FaqElement = ({ title, text, }) => { const [open, setOpen] = useState(false); return ( <FaqElementStyled> <h1 onClick={() => setOpen(!open)}>{title}</h1> <TextContent visible={open}>{text}</TextContent> </FaqElementStyled> ); };
  21. Config .env

  22. Backend: Models Page TextElement FAQElement - Title - Description -

    Image - Text
  23. GraphQL - Route - Page - Fields - readOne op

    with Resolver - nestedQueries - Elements - Menu - Children
  24. Backend: Resolver

  25. GraphiQL Your single most important tool Working with GraphQL. composer

    require --dev silverstripe/ Graphql-devtools Demo
  26. Client: GraphQL /src/utils/api.ts Called by getServerSideProps

  27. Tricks BaseElementalExtension: - getContentFields: Waiting for GraphQL 4 Page: -

    FrontendLink - Menu - PreviewLink Cannot use LinkOrSection, as Director::get_curr_page() uses Controller::curr(), which is not available.
  28. Hosting - Silverstripe CMS: Standard - Javascript: Start with pm2

    - NGinx: - /api: Rewrite to Silverstripe public folder - /: Proxy to Javascript-Server location ^~ /api { alias [...]/demo/backend/public; try_files $uri $uri/ @silverstripe; [...] } location @silverstripe { rewrite /api/(.*)$ /api/index.php?$1 last; } location ~ ^/ { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://localhost:3000; } > yarn && yarn build > pm2 start yarn --interpreter bash --name app -- start > pm2 restart app
  29. Conclusion SSR is no silver bullet Headless is here to

    stay SSR+Headless Silverstripe CMS is easy to setup I would like to see a positioning for Silverstripe CMS as a headless CMS.
  30. Thank you! I’m happy to speak with you about Headless+SSR.

    Or anything else. Andy Adiwidjaja EMail: aa@adiwidjaja.com Illustrations: Maria Müller-Leinweber https://www.mamuelei.de