Headless Wagtail CMS: How to Enable the v2 API to Create a Headless CMS

In this video, we enable Wagtails powerful Headless CMS (v2 API) by writing just 12 lines of code.
Wagtail comes with a lot of really powerful features. Many features are not enabled by default as to keep your site running quickly and efficiently. One of those amazing features is the Wagtail v2 API, which can return any page, image, document, orderable and StreamField as a JSON response for your SPA/PWA to consume.
To test your API endpoint, you can open your Browsers Console (right click - inspect - console) and type in this JavaScript, which will make a request to your main Pages listing view:
gist.github.com/KalobTaulien/... (I wasn't allowed to paste the raw code, but here's the Gist)
Tutorial: learnwagtail.com/tutorials/ho...
Git Commit: github.com/CodingForEverybody...
Learn Wagtail from scratch with the official Wagtail for Beginners Course
learnwagtail.com/wagtail-for-...
Used in this video: Wagtail 2.4, Python 3.7, Django 2.1.5 #Wagtail #Django #Python

[@dmytroyeroshkin7449]

Just a quick note to anyone watching these tutorials now, there was a change in wagtail version 2.8: the imports are now: from wagtail.api.v2.views import PagesAPIViewSet from wagtail.images.api.v2.views import ImagesAPIViewSet from wagtail.documents.api.v2.views import DocumentsAPIViewSet and as a result use: api_router.register_endpoint('pages', PagesAPIViewSet) api_router.register_endpoint('images', ImagesAPIViewSet) api_router.register_endpoint('documents', DocumentsAPIViewSet)

[@leiwang4984]

Thank you very much for the video, I appreciate it very much

[@AyazAmlani]

simply amazing. great vid as always.

[@CodingForEverybody]

Cheers! Headless websites are pretty cool, but like all CMS's there are still some hard problems to figure out with it.

[@AyazAmlani]

@@CodingForEverybody I can see that. I want to learn how to integrate with vue.js. I just want to see the ajax magic happen.. I know u have an ajax template video coming up and I'm excited for that. I am very impressed with your videos they are helping me greatly. Thanks!

[@CodingForEverybody]

Me and my dev friend Bryan gave a talk in December about using Vue.js with Wagtails headless CMS. We made an entire repo, feel free to check it out github.com/hyshka/wagtail-vue-talk there might be some goodies in there you can leverage

[@shijinap9280]

please give the tutorial related to wagtail cms integration with elastic search

[@PudiimBR]

"This isn't Wordpress" YES, please, sir

[@mindeyi]

Interesting, just thinking though, how do we make distributed system-friendly IDs in the API, like uuid, instead of autoincremental ID.

[@CodingForEverybody]

This is more of a Django thing. But you'll want to look at the UUIDField docs.djangoproject.com/en/3.0/ref/models/fields/#uuidfield

[@aldrinnavarro9653]

Amazing. Question, what terminal is that? Looks retro!

[@CodingForEverybody]

Cathode

[@lalasmuathasim]

How do we handle 'Preview' and 'View Live' in such a decoupled setup. I have tried Torchbox wagtail-headless-preview without much luck

[@CodingForEverybody]

People are using GraphQL for a lot of this stuff. But a lot of people are using the Torchbox repo you mentioned.

[@asadullashaikh4977]

how to post the data in wagtail. I didn't see any lecture-related posting or deleting data in wagtail using v2 API (rest api)

[@wyvern274]

Hey, I've been interested in backend development (headless cms) and I really wanted to use Python instead of javascript (because python is obviously superior). Now honestly I forgot a lot of my python knowledge since school. What python/web dev concepts/tools/information should I know before getting into this tutorial.

[@CodingForEverybody]

For this particular tutorial, you should know the concepts of a RESTful API (mostly just GET requests), and because this is all about Wagtail CMS, knowing some of the existing functionality that Wagtail can provide will be useful (but not mandatory-There are ~50 other videos to help understand different parts of Wagtail).

[@wyvern274]

@@CodingForEverybody Thank you, i actually really appreciate these. Just wondering, on your {%%} tags you have text color on 'self' How would I get that in VSCode. And as my last question, do you know how I could set this up with Vue? Would I just link to my .vue instead of .html?

[@CodingForEverybody]

​@@wyvern274 Vue.js would essentially just use HTML/CSS/JS files, there's no real attachment to Wagtail - once the static assets (vue.js) is loaded, it can make an ajax request to your wagtail api endpoint, and format the data in a component. It's like running 2 servers. And for text highlighting, I believe mine gets highlighted because I'm using an extension called Django Template (github.com/iambibhas/vscode-django-template)

[@redditcamp543]

I still have no idea why would I want to implement this.

[@paulbrouse5392]

You would use this if you want your frontend to be something other than wagtail/django templates. IE, you want to hook into your backend through a React/Vue/Angular front end, or use this same backend in a mobile app.

[@karthikwasudevan]

@@paulbrouse5392 You have any idea how i would go about implementing authentication in such a setup? I'm using React for the front end.

[@francosbenitez]

@@paulbrouse5392 Totally.