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. We'll enable this by adding just 12 lines of code to our Wagtail CMS website.
You've undoubtedly stumbled across a website that's fluid and smooth. Pages transition without any flashing. And everything seems to be loading dynamically. Well, that's a progressive web app (PWA) or single page application (SPA). It acts as if it's an application on your mobile device. But in reality, it's just a website wearing a really good disguise.
The first step you'll need to take to start creating a PWA is enabling Wagtails existing support for a JSONified output. This is actually very easy to do. Let's install the existing apps.
base.py file and add the following lines to your
INSTALLED_APPS = [ # ... 'wagtail.api.v2', # ... 'rest_framework', ]
If you're starting a new (or close-to-new) project, you shouldn't already have an
api.py file. If you don't, make a new file beside
urls.py and name it
api.py. Then add the following code.
# Our imports from wagtail.api.v2.endpoints import PagesAPIEndpoint from wagtail.api.v2.router import WagtailAPIRouter from wagtail.images.api.v2.endpoints import ImagesAPIEndpoint from wagtail.documents.api.v2.endpoints import DocumentsAPIEndpoint # Init the Wagtail Router api_router = WagtailAPIRouter('wagtailapi') # Register 3 API endpoints: Pages, Images and Documents api_router.register_endpoint('pages', PagesAPIEndpoint) api_router.register_endpoint('images', ImagesAPIEndpoint) api_router.register_endpoint('documents', DocumentsAPIEndpoint)
I mentioned this file should be beside your
urls.py file, but it doesn't need to be, it just makes the next step 1% easier.
Lastly, we need to add 2 lines to our urls.py file.
# ... all your other imports from .api import api_router urlpatterns = [ # ... # This line MUST come before the bottom url pattern url(r'^api/v2/', api_router.urls), # ... url(r'', include(wagtail_urls)), ]
To access your API, you'll need to open http://localhost:8000/api/v2/pages/. This is your list view of all your Wagtail pages. At this point, your custom fields will not show up, just the default Wagtail Page fields will show up.
Want to see the entire Git Commit? No problem. The link to the Git Commit here will show you all 12 lines we added to our Wagtail website.