django-cms icon indicating copy to clipboard operation
django-cms copied to clipboard
verified publisher icon django-cms

feat: Headless readiness

Open fsbraun opened this issue 1 year ago • 4 comments

Description

Regular projects distribute their content through serving pages at their corresponding URL as defined in the page tree. This is achieved by adding path("", include(cms.urls)) to a project's urls.py. Also, the CMS requires CMS_TEMPLATES or CMS_TEMPLATE_DIR to be set.

This PR allows setting up headless-ready projects by:

  1. Not requiring path("", include(cms.urls)) being part of the projects URLs. All editing is done in the admin and the edit, structure and preview endpoints.

    The structure endpoint can be used on read-only objects (such as published pages), too, allowing to view the tree and copy plugins. All modifying actions are disabled for read-only objects.

  2. Not requiring any templates to be defined. If no templates are available, all interaction runs through the structure endpoint. While the editing experience might be limited, this can be a fast way of setting up a project.

  3. This PR moves the create wizard URL to the placeholder admin (which contains all editing endpoints) (but also keeps the previous endpoint in cms.urls for the wizard for compatibility reasons).

  4. The data bridge allows the frontend to update the structure board after changes in the plugin tree. This PR changes the HTML response for changes in the plugin tree from inlining the data in a script to a script tag containing JSON objects which are read and passed to the data bridge.

Related resources

  • #7835
  • #7927

Checklist

  • [x] I have opened this pull request against develop-4
  • [x] I have added or modified the tests when changing logic
  • [x] I have followed the conventional commits guidelines to add meaningful information into the changelog
  • [x] I have read the contribution guidelines and I have joined #workgroup-pr-review on Slack to find a “pr review buddy” who is going to review my pull request.

fsbraun avatar Mar 21 '24 20:03 fsbraun

@fsbraun Great work on this. I would love to see how this works in practise and what we can do with it?

vinitkumar avatar May 20 '24 19:05 vinitkumar

This PR includes JS and CSS changes to disable UI items in the structure board. Those changes only become visible after running gulp sass bundle.

Still, a headless-ready project for testing can be quickly set up using these steps:

  • Create a fresh venv: python3 -m venv .venv
  • Activate it: source .venv/bin/activate
  • Install PR: pip install git+https://github.com/fsbraun/django-cms@feat/data-bridge
  • Create project: djangocms headlesstest --template https://github.com/django-cms/cms-template/tarball/feat/headless
  • Spin up test server: cd headlesstest && ./manage.py runserver
  • Go to admin in the browser: http://127.0.0.1/en/admin/

The template only installs djangocms-text as plugins but works with any plugins.

@vinitkumar @marksweb

fsbraun avatar May 22 '24 23:05 fsbraun

@macolo Thank youn for the comments!

I've tried to improve the clarity of the CMS_PLACEHOLDERS setting. It is supposed to replace CMS_TEMPLATES in a headless-only config.

fsbraun avatar Jun 25 '24 18:06 fsbraun

@fsbraun the docs now make a lot of sense to me, easy to understand! 💪 I like the design of this functionality, it seems quite intuitive to me from a developer's perspective. 👍

macolo avatar Jun 26 '24 13:06 macolo