Headless demo site

[thibaudcolas]

An official demo site focused on demonstrating Wagtail’s headless support – primarily so our contributors and maintainers can more easily work on headless improvements.

Intended outcome

The primary goal is to be able to demo / test the headless capabilities of Wagtail in a representative site. Demonstrating best practices would be good, where it makes sense.

For long-term maintenance, we aim to keep ongoing efforts as low as possible: no hosted environment, make changes in the existing bakerydemo as much as possible (for example server-side API configuration), limit adoption of patterns that are very framework-specific where possible.

Here is the provisional choices made with the vue to repurpose the bakerydemo-nextjs as this new demo site:

• Keep Next.js, as it’s the most popular option per our survey. Use server-rendered Next.js as it will be a better test of headless Wagtail capabilities.
• Keep TypeScript. Keep using the existing bakerydemo’s styles and template markup wherever possible
• Switch from GraphQL to the built-in Wagtail REST API (more popular and it’s better to demo core features).

Features which are (currently) out of scope:

• Multi-site
• GraphQL

More information

• RFC 100: Enhancing headless support
• Wagtail’s headless support

[thibaudcolas]

The demo site is here: bakerydemo-headless. There is more possible work to do but this is already a great start!

[blue-sky-192]

@thibaudcolas I have started improving the NextJs site. First I added the styles and improved the Header of the app made it look exactly like original bakrey-demo. Can you please review it and approve it as well?
wagtail/bakerydemo-headless#3