<aside> 💡 Note: This is just a big brain dump as I was putting this together, so it's less cohesive and less formal than if I was writing something to be consumed by an audience any larger than myself and the team.

</aside>

Problem

The fundamental problem with tying an Ember frontend with a Wagtail backend is routing.

Wagtail allows users to create pages of any type at any point in a site's tree structure. At the top level you might have a homepage (e.g. gothamist.com), which is of type HomePage. Below that, you might have /articles, which is of type ArticleList. Below that you have a bunch of articles (all of type ArticlePage), but a user could also choose to make an InformationPage or a GalleryPage or any other type of page that they have permission to create.

Here is the problem this presents:

Ember's routing ties specific routes to pre-existing templates. When you run ember generate route widget it creates a route file (widget.js), but also a template widget.hbs.

See below:

Ember does this because it expects a given route to always have a specific template.

But with Wagtail allowing any page type at any level (again, depending on permissions), this means Ember cannot know in advance what template a given route will require to be rendered.

What I'm Trying To Do

My goal with this POC is to devise a proof-of-concept for an Ember route (a wildcard route, e.g. any url under /wildcard/*) which hits the Wagtail "pages" API and, based on the API response's page_type key, returns the correct template populated with the correct data.

Instead of always rendering the wildcard.hbs template, this would programmatically return a different template based on an API payload.

Step 1: Using the html_path query string

Wagtail's Pages API provides a query string parameter html_path that, given a path, redirects the API to the correct Pages API url, if it exists.

For example:

*https://cms.prod.nypr.digital/api/v2/pages/find?html_path=/news/death-toll-trump-fixated-approval-ratings*

redirects to

*https://cms.prod.nypr.digital/api/v2/pages/144593/*

If the URL does not have a page associated with it, it returns a 404 status.